Я дорабатываю функциональность своего испытания Pomodoro Clock для FreeCodeCamp.com и столкнулся с проблемами, поэтому решил начать документировать их.

Настройка:

  1. Нажмите на кнопки + и -, чтобы увеличить/уменьшить значения времени в минутах.
  2. Функции addTime() и subtractTime() вызываются при щелчке по элементам +/- привязки (‹a›):
//snippet of code. Incomplete.
plus[0].addEventListener("click", addTime);
plus[0].addEventListener("mousedown", holdThis);
plus[0].addEventListener("mouseup", holdThis);
function addTime(s) {
  console.log(s);  //see image below
  console.log(this);  //see image below
  switch(this.previousElementSibling.id) {
    //it does stuff here
  }
}
function holdThis(e) {
  let intervalID;
  (e.type === "mousedown" ? holdAdd(this) : letGoAdd(this));
  function holdAdd(s) {
    intervalID = setTimeout(addTime(s), 1000);
  }
  function letGoAdd() {
    clearTimeout(intervalID);
  }  
}

3. Когда выполняется addTime(), он использует this для определения id предшествующего элемента. В этом случае id промежутков, чьи тексты 26 и 5от первого изображения. Он используется для увеличения значений времени.

4. Когда выполняется holdThis(), он передает e (или событие) в качестве аргумента. Затем он определяет, является ли e.type mousedown или mouseup, и выполняет соответствующие функции.

Цель:

Чтобы иметь возможность удерживать мышь и автоматически увеличивать или уменьшать значения до тех пор, пока не произойдет наведение мыши.

Проблемы:

а) Как выяснилось, this внутри addTime() не работает, когда функция вызывается через holdAdd(). Я передал это из holdAdd() в addTime() как s, чтобы попытаться захватить ‹a› элемент.

Почему this.previousElementSibling.id не работает?

this относится к ‹a class="plus"›+‹/a›, когда нажимается плюс и вызывается addTime() напрямую, но когда addTime() вызывается внутри holdThis() и holdAdd(), затем this теперь ссылается на Окно объект.

Решение:

Все еще в стадии разработки. Этот пост будет обновлен, как только я это выясню. Наверное, это так очевидно.

Изменить:

Окончательное решение:

let intervalID = null;
  
  function holdThis(e) {
    (e.type === "mousedown" ? holdAdd(this) : letGoAdd());
function holdAdd(s) {
      intervalID = setInterval(function() {
        addTime(s);
        }, 500);
    }
function letGoAdd() {
      clearInterval(intervalID);
      intervalID = null;
    }
  }

Логика:

Большая ошибка: использование setTimeout Замените setTimeout на setInterval.

Чтобы иметь возможность вызывать addTime(), вам нужно вызвать его внутри анонимной функции. См. http://stackoverflow.com/questions/457826/pass-parameters-in-setinterval-function для справки. intervalID должен быть вне функции, чтобы clearInterval работал.