javascript - 在 JS 中使用多个参数访问函数中的对象范围

Question

我得到了这个功能:

const debounce = (func, delay) => {
  let inDebounce;

  return function() {
    const context = this
    const args = arguments
    clearTimeout(inDebounce)
    inDebounce = setTimeout(() => func.apply(context, args), delay)
  }
}

var likes_btn = document.getElementsByClassName("js-submit-like");

for (var i = 0; i < likes_btn.length; i++) {
  likes_btn[i].addEventListener('click', debounce(function(el) {
    alert("hello");

    el.preventDefault();
  }, 500));
}

所以问题是，我需要在执行去抖动之前使用 .preventDefault() 。目前，真正发生的是在 debounce() 末尾执行，而不是在函数作用域中执行。

如何访问函数作用域？谢谢!

Answer 1

只需将其移到去抖动器回调之外即可:

const debouncer = debounce(() => alert("hello"), 500);
likes_btn[i].addEventListener('click', function(event) {
   event.preventDefault();
   debouncer(event);
});

使用一些链式函数可能会更优雅:

 const both = (fn1, fn2) => (...args) => (fn1(...args), fn2(...args));
 const stop = event => event.preventDefault();
 const listen = (el, name, handler) => el.addEventListener(name, handler);

 for(const btn of likes_btn) {
   listen(btn, "click", both(
    debounce(() => alert("hello"), 500),
    stop
   ));
}