Как я могу использовать регулирование для получения цели события?

Question

Как я могу использовать регулирование для получения цели события?

1

Ссылаясь на этот сайт, https://codeburst.io/throttling-and-debouncing-in-javascript-646d076d0a44

throttled(delay, fn) {
    let lastCall = 0;
    return function (...args) {
        const now = (new Date).getTime();
        if (now - lastCall < delay) {
            return;
        }
        lastCall = now;
        return fn(...args);
    }
}

Я хочу использовать функцию удушения, как это.

item.addEventListener('click', throttled(2000, func(e.target)));

Я должен использовать это, чтобы получить значение e.target.
Однако, если вы напишите этот код, функция регулирования не будет работать должным образом.

item.addEventListener('click', (e) => {throttled(2000, func(e.target))});

Как я могу заставить функцию удушения работать должным образом, получая целевые события щелчка?

jini 11 янв. 2019, в 08:07

Источник

Теги:

javascript

ecmascript-6

events

throttling

throttle

2 ответа

1

Ваша удушенная функция ожидает функцию в качестве второго параметра.

предположим, что func просто регистрирует e.target на консоли, вы можете написать:

item.addEventListener('click', throttled(2000, func));

с

const func = (e) => console.log(e.target);

Или, если вы хотите все в одной строке:

item.addEventListener('click', throttled(2000, (e) => func(e.target)));

klugjo 11 янв. 2019, в 05:20

Ещё вопросы

Kaiido · Accepted Answer · 2019-01-11T04-35-00.000Z

Ваша throttled функция вернет функцию-обертку вокруг вашего исходного обработчика событий. Он передаст все аргументы, которые он получил, когда now - lastCall >= delay в функцию обратного вызова fn.
Именно эту функцию-обертку вы добавите в качестве обработчика события, т.е. возвращаемого значения throttled().

Поэтому все, что вам необходимо пройти throttled нормальный обработчик события, то есть то же самое, вы бы прошли до слушателя событий:

// let be a bit verbose

// our event handler
function handleevent(evt) {
  console.log(evt.clientX); // logging the clientX here because evt.target is a big object for SO console.
}
// the wrapper function
const myThrottledFunc = throttled(2000, handleevent);
// we add the wrapper as event handler
addEventListener('click', myThrottledFunc);


function throttled(delay, fn) {
  let lastCall = 0;
  return function wrapper(...args) {
    const now = (new Date).getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    return fn(...args);
  }
}

click anywhere

Или как однострочный onclick = throttled(2000, evt => console.log(evt.target));

Привет, пожалуйста, объясните или обратитесь к какой-либо документации, почему function throttled(delay, fn) { let lastCall = 0; не lastCall to 0 Это довольно удивительно
@ BlackMamba Да, но throttled вызывается только один раз, когда мы инициализируем функцию-обертку. Несколько раз вызывается оболочка, но эта функция никогда не устанавливает lastCall в 0.