Использование addEventListener и removeEventListener дважды на одной кнопке в JavaScript - PullRequest
Новая
       97

Использование addEventListener и removeEventListener дважды на одной кнопке в JavaScript

0 голосов
/ 24 апреля 2020

Я пытаюсь создать секундомер в браузере, в котором время фиксируется после «захвата» (что позволяет таймеру продолжить работу) или «остановки» (что также останавливает таймер). Для этого я хочу, чтобы одна кнопка html чередовала две метки и соответствующие функции («запуск» и «остановка и захват»). Я попытался использовать два экземпляра addEventListener, каждый со связанным removeEventListener. Прочитав эту полезную статью , я написал следующий код: 

var button = document.getElementById("start");

function onStart() {  
  start();
  document.getElementById("capture").style.visibility = 'visible'; // show capture button
  document.getElementById("start").innerHTML = "Stop & Capture";

  button.addEventListener("click", function() {
    onCapture(); // assigns value to a new variable
    onStop();
    button.removeEventListener("click", arguments.callee, false); // remove this EventListener
    }, false);
}

function onStop() {  
  stop();
  document.getElementById("capture").style.visibility = 'hidden'; // hide capture button 
  document.getElementById("start").innerHTML = "Start";

  button.addEventListener("click", function() {
    onStart();
    button.removeEventListener("click", arguments.callee, false); // remove this EventListener
  }, false);
}

Однако поведение кнопки «Пуск» / «Остановка и захват» является неожиданным и сохраняет все больше и больше время экземпляров каждый раз, когда он нажимается. Я предположил, что removeEventListener не работает, но я могу ошибаться. Ассоциированный html является: 

<div>Time: <span id="time"></span></div>
    <button onclick="onStart()" id="start" class="start" style="width:150px">Start</button>
    <button onclick="onCapture()" id="capture" style="visibility:hidden">Capture</button>
    <button onclick="reset()" id="reset">Reset</button>

1 Ответ

0 голосов
/ 26 апреля 2020

Итак, потратив слишком много времени, пытаясь найти разные решения, оказалось, что проблема заключается в использовании removeEventListener с анонимными функциями. Вот код, который работал правильно: 

function onStart() {
    document.getElementById("start").removeEventListener("click", onStart, false); // remove listener
    start();
    document.getElementById("capture").style.visibility = 'visible'; // show capture button
    document.getElementById("start").innerHTML = "Stop & Capture";
    document.getElementById("start").addEventListener("click", onStop, false); // add listener
}

function onStop() {
    document.getElementById("start").removeEventListener("click", onStop, false); // remove listener
    onCapture();
    stop();
    document.getElementById("capture").style.visibility = 'hidden'; // hide capture button 
    document.getElementById("start").innerHTML = "Start";
    document.getElementById("start").addEventListener("click", onStart, false);  // add listener
}
...