Использование события колеса для вызова функции, которая выбирает новые переменные в массиве
Я добавил прослушиватель событий колеса в элемент HTML. В моем массиве 4 переменные. Теперь моя цель состоит в том, чтобы всякий раз, когда пользователь вращает колесико мыши/тачпад на объекте, к которому добавляется прослушиватель событий, должна выбираться следующая переменная.
Например, мой массив выглядит так [яблоко, апельсин, папайя, гуава]. Я хочу создать что-то, что будет выбирать яблоко при движении колеса, затем апельсин при следующем движении колеса, затем папайю при следующем движении колеса и так далее.
И та же работа в обратном направлении (от гуавы к папайе, чтобы настроить каждый раз, когда пользователь вращает колесо мыши или прокручивает тачпад)
Проблема, с которой я сталкиваюсь, заключается в этих двух:
колесо мыши срабатывает слишком много раз и вызывает функцию (проклятие) слишком много раз. Даже если я напишу функцию для перебора массива в указанном мной порядке. Функция, вызываемая так много раз, рандомизирует вещи.
Я даже не знаю, как написать функцию, чтобы вызвать такую итерацию в массиве. Это не основная моя проблема, на данный момент.
var controller = document.querySelector(".main"); var apple = document.querySelector(".box"); var orange = document.querySelector(".box1"); var papaya = document.querySelector(".box2"); var guava = document.querySelector(".box3"); var boxes = [apple,orange,papaya,guava]; controller.addEventListener('wheel', damnIt); function damnIt(){ console.info ("hey"); //my function for array selection goes here }
Спасибо Владислав. Спасибо за ваше время на это. Это был очень быстрый и оперативный ответ. Я поищу этот термин и посмотрю, решит ли он мою проблему, и очень скоро обновлю эту информацию.
Может проблема с мышкой? Или, может быть, прослушиватель событий добавлялся много раз? Можете ли вы попытаться изменить событие на «щелчок» и показать результаты?
Итак, если я изменю прослушиватель событий на щелчок, он запустит функцию (damnIt) только один раз. Я думаю, что это больше связано с природой слушателя колеса, который продолжает работать до тех пор, пока событие полностью не остановится. Проблема больше связана с сенсорной панелью ноутбука. Если я использую два пальца на тачпаде и прокручиваю вверх для жеста прокрутки, функция fuckingIt срабатывает слишком много раз, заливая мою консоль «привет»
Возможно, вам нужно заменить событие «колесо» на событие «колесо мыши», а затем добавить событие «touchmove», которое вызовет событие «колесо мыши». Образец: css-tricks.com/forums/topic/triggering-a-wheel-event-on-mobile/… См. также: stackoverflow.com/questions/50688820/…
Я не использовал событие колесика мыши, так как в документации на MDN сказано, что это событие устарело. Спасибо, что сообщили мне о «touchmove». Я проверю это. Я начинаю верить, что моя проблема будет решена путем устранения дребезга функции, о которой вы упоминали ранее и о которой также говорят другие. Я обновлю по этому вопросу в ближайшее время.
Кажется, это работает лучше, чем debounce. lodash.com/docs/4.17.11#дроссель
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Для меня "колесо"-событие работает нормально. Может у вас есть другие слушатели колес?
document.addEventListener('wheel', function() {
console.info('Hi');
}.bind(this));Извините, но функция по-прежнему срабатывает слишком много раз. К этому времени я не уверен, использую ли я правильный прослушиватель событий или нет. Итак, моя цель состоит в том, чтобы пользователь использовал два пальца на сенсорной панели своего ноутбука или колесико мыши, чтобы имитировать движение прокрутки. Но вместо прокрутки на экране отображается новый элемент. Эти элементы хранятся в массиве с соответствующим свойством CSS. Надеюсь, я смог более ясно изложить свою мысль. Извините, если я все еще не ясно здесь.
Вы должны использовать дросселирование. Об этом много статей в сети. Например, https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf
Спасибо, я думаю, что это лучшее решение для моей проблемы
Рысью (вызов не чаще, чем раз в 150 мс):
var controller = document.querySelector(".main");
var apple = document.querySelector(".box");
var orange = document.querySelector(".box1");
var papaya = document.querySelector(".box2");
var guava = document.querySelector(".box3");
var boxes = [apple,orange,papaya,guava];
controller.addEventListener('wheel', throttle(damnIt, 150));
function damnIt() {
console.info ("hey");
//my function for array selection goes here
}
function throttle(cb, timeout) {
// You can rewrite this function by replacing the time limit with the
// scroll pitch. I think that would be the best solution.
// let delta = e.deltaY || e.detail || e.wheelDelta;
// ... sum delta and call callback by the number of steps: accumulator/step
let lastCall = 0;
return function() {
if (new Date() - lastCall > timeout) {
lastCall = new Date();
cb();
}
}
}
Возможно, вам нужна функция debounce (например, lodash debounce) или аккумулятор для выполнения действия после N событий.