Функция JavaScript setTimeout делает неожиданные множественные вызовы - PullRequest
Новая
       2

Функция JavaScript setTimeout делает неожиданные множественные вызовы

1 голос
/ 04 апреля 2011

Я попытался упростить проблему с кодом ниже. Часть кода опирается на jQuery, к вашему сведению.

По сути, я ожидаю, что при нажатии кнопки «Новая вещь» появится одно предупреждение. Тем не менее, если запустить таймер, нажатие кнопки «Новая вещь» приводит к неожиданному поведению, при котором количество появляющихся предупреждающих сообщений равно истекшему времени.

Эта проблема уничтожает меня.

Чтобы быть точным, я включил полный пример. Я понимаю, что это немного долго. 

$(document).ready(function() {
    mainLoop();
});

var counter = 0;
var timerIsOn = 0;
var t;

function mainLoop() {
    handleInput();
    timer();
}

function timerHandle() {
    if (!timerIsOn){
        timerIsOn = 1;
        timer();
    }
}

function timer(){
    if (timerIsOn) {
    t = setTimeout(mainLoop, 1000);
    counter++;
    $("span").text(counter); // To display the elapsed time 
    }
}

// Just simple buttons
function handleInput(){    
    $("#timer").click(timerHandle); 
    $("#new").click(createThing);
}

function Thing() {
    this.talk();
}

Thing.prototype.talk = function() {
    alert("Hello!");
}

function createThing() {
    new Thing;
}

Я очень ценю помощь!

Ответы [ 3 ]

1 голос
/ 04 апреля 2011

Это потому, что вы добавляете несколько обработчиков событий к событию нажатия кнопок 

function timer(){
    if (timerIsOn) {
      t = setTimeout(mainLoop, 1000);
      counter++;
      $("span").text(counter); // To display the elapsed time 
    } }

Если время ожидания истекло, он выполнит mainLoop.При вызове handleInput и handleInput подключается дополнительный обработчик событий к событию click. 

function handleInput(){    
     $("#timer").click(timerHandle); 
     $("#new").click(createThing); }

Поддержка, если таймер работает и сработал 3 раза.Нажатие на #new или #timer вызовет подходящую функцию (timerHandle, createThing) 3 раза.

0 голосов
/ 04 апреля 2011

ход: 

handleInput();

до: 

document ready function
0 голосов
/ 04 апреля 2011

Проблема в том, что вы регистрируете обработчики событий много раз. Каждый раз, когда вы звоните 

$("#timer").click(timerHandle);

Вы регистрируете новый обработчик событий. Это означает, что при нажатии на div, timerHandle будет работать столько раз, сколько вы набрали выше. Вы можете использовать unbind, чтобы избежать этого: 

$("#timer").unbind('click');
$("#timer").click(timerHandle);
...