1 универсальная функц. для параллельного запуска независимых счётчиков

  • Автор темы parallax
  • Дата начала
Статус
Закрыто для дальнейших ответов.
P

parallax

#1
Теоретически простого хочу: на странице есть множество одинаковых форм, в каждой из них есть поле для ввода начального значения и кнопочка для запуска инкрементного счётчика. Для трёх форм я ещё расклонирую одну и ту же функцию, только индексы добавлю к названиям функций, объектам, переменным и ко всему, к чему необходимо. А как быть, если нужно запустить полсотни счётчиков, причём кликая по кнопкам "Запустить" поочерёдно, но не плодя однотипные функции, а сделав всё одной универсальной? Да так, чтобы не получилось лжерешения вроде обслуживания всех счётчиков одной функцией с setTimeout'ом (или setInterval'ом), которая будет панически скакать в цикле с перебором всех полей и обновлять значение по очереди! По всей видимости, необходимо вводить prototype, constructor, new и т. п., я бы даже сказал, что именно это меня и интересует, а не завязка на функцию времени (new Date()).getTime(), постановка в очередь времён запуска каждого из событий и последовательная обработка всей очереди счётчиков одной рефреш-функцией с setTimeout'ом или setInterval'ом. Если нельзя запрототипить в принципе, подскажите другие способы размножить независимые рефреш-функции для каждого элемента (кроме runtime-генерации рефреш-функций на лету с помощью JS с подстановкой индексов — это также не то, что мне нужно).

Вот пример ожидаемой работы скрипта после унификации всех его однотипных функций (здесь скрипт раздут повторяющимися однотипными функциями):

<HTML>
<HEAD>
<TITLE>Multicounter</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<STYLE>
BODY, TABLE, TR, TH, TD, INPUT
{
font-family:Tahoma;
font-size: 14px;
color:#2A486C
}

TABLE
{
border:solid silver 3px;
width:172px;
}

TR
{
text-align: center
}

TD
{
color: white;
background-color: #666777;
border: solid silver 1px;
}

TH
{
font-size: 18px;
color: red;
background-color: #DFDFF1;
}

INPUT
{
border: solid #dddddd 1px;
width: 24px;
text-align: center
}

.tbl
{
border-collapse:collapse
}

.send
{
border: solid #98aa89 2px;
font-weight:bold;
color: white;
width: 100%;
height: 27px
}

.parameters
{
font-weight:bold;
background-color: #888888;
width: 70%;
text-align: left
}
</STYLE>
<script>

function counter1(theForm) {
function theFormElementAccess(field) {
return theForm.elements[field+theForm.id.match(/\d/)].value
}
this.theForm = theForm
if(!document.getElementById("results1").innerHTML.match(/\d+/))
this.parameter1 = theFormElementAccess('parameter')
document.getElementById("results1").innerHTML = this.parameter1++
setTimeout("counter1(this.theForm)",330)
}

function counter2(theForm) {
function theFormElementAccess(field) {
return theForm.elements[field+theForm.id.match(/\d/)].value
}
this.theForm = theForm
if(!document.getElementById("results2").innerHTML.match(/\d+/))
this.parameter2 = theFormElementAccess('parameter')
document.getElementById("results2").innerHTML = this.parameter2++
setTimeout("counter2(this.theForm)",330)
}

function counter3(theForm) {
function theFormElementAccess(field) {
return theForm.elements[field+theForm.id.match(/\d/)].value
}
this.theForm = theForm
if(!document.getElementById("results3").innerHTML.match(/\d+/))
this.parameter3 = theFormElementAccess('parameter')
document.getElementById("results3").innerHTML = this.parameter3++
setTimeout("counter3(this.theForm)",330)
}
</SCRIPT>
</HEAD>

<BODY>
<TABLE style="border:none; background-color:#FFFFFF;" cellspacing=7 cellpadding=0>
<TR>
<TD>
<TABLE class="tbl">
<FORM id="form1">
<TR>
<TD class=parameters>value1:</TD>
<TD><INPUT id="parameter1" value="17"></TD>
</TR>
<TR>
<TD><INPUT class=send onclick="counter1(this.form)" type="button" value="Send"></TD>
</TR>
</FORM>
</TABLE>
</TD>
<TD>
<TABLE class="tbl">
<FORM id="form2">
<TR>
<TD class=parameters>value2:</TD>
<TD><INPUT id="parameter2" value="43"></TD></TR>
<TR>
<TD><INPUT class=send onclick="counter2(this.form)" type="button" value="Send"></TD>
</TR>
</FORM>
</TABLE>
</TD>
<TD>
<TABLE class="tbl">
<FORM id="form3">
<TR>
<TD class=parameters>value3:</TD>
<TD><INPUT id="parameter3" value="78"></TD></TR>
<TR>
<TD><INPUT class=send onclick="counter3(this.form)" type="button" value="Send"></TD>
</TR>
</FORM>
</TABLE>
</TD>
</TR>
<TR>
<TH id="results1"> </TH>
<TH id="results2"> </TH>
<TH id="results3"> </TH>
</TR>
</TABLE>

</BODY>
</HTML>

А вот то, к чему я стремлюсь, в то время как пример не работает должным образом, а бросает приращение предыдущего счётчика и набрасывается на только что запущенный, будто и не было никакой прототипизации:

<HEAD>
<script>
function theCounter(){}

function counter(theForm) {
function theFormElementAccess(field) {
return theForm.elements[field+theForm.id.match(/\d/)].value
}
this.theForm = theForm
if(!document.getElementById("results"+theForm.id.match(/\d/)).innerHTML.match(/\d+/))
this.parameter = theFormElementAccess('parameter')
document.getElementById("results"+theForm.id.match(/\d/)).innerHTML = this.parameter++
setTimeout("counter(this.theForm)",330)
}

theCounter.prototype.toString = counter(theForm)
</SCRIPT>
</HEAD>

<BODY>
<TABLE style="border:none; background-color:#FFFFFF;" cellspacing=7 cellpadding=0>
<TR>
<TD>
<TABLE class="tbl">
<FORM id="form1">
<TR>
<TD class=parameters>value1:</TD>
<TD><INPUT id="parameter1" value="17"></TD>
</TR>
<TR>
<TD><INPUT class=send onclick="counter(this.form)" type="button" value="Send"></TD>
</TR>
</FORM>
</TABLE>
</TD>
<TD>
<TABLE class="tbl">
<FORM id="form2">
<TR>
<TD class=parameters>value2:</TD>
<TD><INPUT id="parameter2" value="43"></TD></TR>
<TR>
<TD><INPUT class=send onclick="counter(this.form)" type="button" value="Send"></TD>
</TR>
</FORM>
</TABLE>
</TD>
<TD>
<TABLE class="tbl">
<FORM id="form3">
<TR>
<TD class=parameters>value3:</TD>
<TD><INPUT id="parameter3" value="78"></TD></TR>
<TR>
<TD><INPUT class=send onclick="counter(this.form)" type="button" value="Send"></TD>
</TR>
</FORM>
</TABLE>
</TD>
</TR>
<TR>
<TH id="results1"> </TH>
<TH id="results2"> </TH>
<TH id="results3"> </TH>
</TR>
</TABLE>

</BODY>
 
Статус
Закрыто для дальнейших ответов.