Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / одна универсальная функция для параллельного запуска независимых инкрементных счётчиков / 3 сообщений из 3, страница 1 из 1
16.08.2007, 08:48
    #34731177
BlackNoise
BlackNoise
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
одна универсальная функция для параллельного запуска независимых инкрементных счётчиков
Теоретически простого хочу: на странице есть множество одинаковых форм, в каждой из них есть поле для ввода начального значения и кнопочка для запуска инкрементного счётчика. Для трёх форм я ещё расклонирую одну и ту же функцию, только индексы добавлю к названиям функций, объектам, переменным и ко всему, к чему необходимо. А как быть, если нужно запустить полсотни счётчиков, причём кликая по кнопкам "Запустить" поочерёдно, но не плодя однотипные функции, а сделав всё одной универсальной? Да так, чтобы не получилось лжерешения вроде обслуживания всех счётчиков одной функцией с 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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.08.2007, 16:53
    #34733138
LINUXER
LINUXER
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
одна универсальная функция для параллельного запуска независимых инкрементных счётчиков
Код: 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.
<input id="a" value="135"><input type=button onclick="new Counter('a').start()">
<br><input id="b">
<script>

function Counter(id){
  var PERIOD= 500 ;
  var self=this;//save context
  var timerId;
  var el=document.getElementById(id);

  this.value=parseInt(el.value) ||  0 ;

  var refresh=function(){
    el.value=++self.value;    
  }
  
  this.start=function(){
    if(timerId)return;
    timerId=setInterval(function(){return refresh();},PERIOD);//magic trick
  }
  this.stop=function(){
    clearInterval(timerId);
    timerId=null;
  }
};

//testing
var c=new Counter('b');
c.start()
</script>
http://dklab.ru/chicken/nablas/39.html
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.08.2007, 06:41
    #34733893
BlackNoise
BlackNoise
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
одна универсальная функция для параллельного запуска независимых инкрементных счётчиков
Теоретически простого хочу: на странице есть множество одинаковых форм, в каждой из них есть поле для ввода начального значения и кнопочка для запуска инкрементного счётчика. Для трёх форм я ещё расклонирую одну и ту же функцию, только индексы добавлю к названиям функций, объектам, переменным и ко всему, к чему необходимо. А как быть, если нужно запустить полсотни счётчиков, причём кликая по кнопкам "Запустить" поочерёдно, но не плодя однотипные функции, а сделав всё одной универсальной? Да так, чтобы не получилось лжерешения вроде обслуживания всех счётчиков одной функцией с 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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / одна универсальная функция для параллельного запуска независимых инкрементных счётчиков / 3 сообщений из 3, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 268ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1457797]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 162ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 42ms
get tp. blocked users:
 2ms
others: 22ms
total:  268ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]