|
|
|
одна универсальная функция для параллельного запуска независимых инкрементных счётчиков
|
|||
|---|---|---|---|
|
#18+
Теоретически простого хочу: на странице есть множество одинаковых форм, в каждой из них есть поле для ввода начального значения и кнопочка для запуска инкрементного счётчика. Для трёх форм я ещё расклонирую одну и ту же функцию, только индексы добавлю к названиям функций, объектам, переменным и ко всему, к чему необходимо. А как быть, если нужно запустить полсотни счётчиков, причём кликая по кнопкам "Запустить" поочерёдно, но не плодя однотипные функции, а сделав всё одной универсальной? Да так, чтобы не получилось лжерешения вроде обслуживания всех счётчиков одной функцией с 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> ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 16.08.2007, 08:48 |
|
||
|
одна универсальная функция для параллельного запуска независимых инкрементных счётчиков
|
|||
|---|---|---|---|
|
#18+
Код: plaintext 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 16.08.2007, 16:53 |
|
||
|
одна универсальная функция для параллельного запуска независимых инкрементных счётчиков
|
|||
|---|---|---|---|
|
#18+
Теоретически простого хочу: на странице есть множество одинаковых форм, в каждой из них есть поле для ввода начального значения и кнопочка для запуска инкрементного счётчика. Для трёх форм я ещё расклонирую одну и ту же функцию, только индексы добавлю к названиям функций, объектам, переменным и ко всему, к чему необходимо. А как быть, если нужно запустить полсотни счётчиков, причём кликая по кнопкам "Запустить" поочерёдно, но не плодя однотипные функции, а сделав всё одной универсальной? Да так, чтобы не получилось лжерешения вроде обслуживания всех счётчиков одной функцией с 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> ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 17.08.2007, 06:41 |
|
||
|
|

start [/forum/topic.php?fid=22&msg=34731177&tid=1457797]: |
0ms |
get settings: |
11ms |
get forum list: |
13ms |
check forum access: |
3ms |
check topic access: |
3ms |
track hit: |
158ms |
get topic data: |
11ms |
get forum data: |
3ms |
get page messages: |
46ms |
get tp. blocked users: |
1ms |
| others: | 249ms |
| total: | 498ms |

| 0 / 0 |

Извините, этот баннер — требование Роскомнадзора для исполнения 152 ФЗ.
«На сайте осуществляется обработка файлов cookie, необходимых для работы сайта, а также для анализа использования сайта и улучшения предоставляемых сервисов с использованием метрической программы Яндекс.Метрика. Продолжая использовать сайт, вы даёте согласие с использованием данных технологий».
... ля, ля, ля ...