Я дорабатываю функциональность своего испытания Pomodoro Clock для FreeCodeCamp.com и столкнулся с проблемами, поэтому решил начать документировать их.
Настройка:
- Нажмите на кнопки + и -, чтобы увеличить/уменьшить значения времени в минутах.
- Функции 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 работал.