通过addEventListener传递它

Question

我有一个以前工作的函数;但是我现在必须用setTimeout让它等待。 我以为我可以添加一个箭头函数作为 eventListener 的回调，并且仍然可以this作为上下文的按钮传递，但我收到错误。

button.addEventListener("click", () => {
    setTimeout(checkAndRespond,1500);
});
//This is the line that throws the error
checkAndRespond = async function () {
    ...
    const row = this.parentElement.parentElement;
    ...
}

我应该如何将this传递到内部函数中？
是否将 setTimeout 上下文作为this传入以检查和响应？
关于箭头函数的工作原理，我有什么不明白的吗？

Answer 1

我应该如何将其传递到内部函数中？

哪个this？箭头函数采用其父函数的上下文(this(，在这种情况下是全局范围，为此this指向window。如果要在某个上下文中动态调用函数(这就是addEventListener的作用(，则必须使用常规function。

是否将 setTimeout 上下文作为这样传入以检查和响应？

不。您必须手动.bind上下文：

 button.addEventListener("click", function() { // <- now we can work with this here
   setTimeout(checkAndRespond.bind(this), 1500); // <- and bind it
 });

或者，如上所述使用箭头函数行为，并将this作为参数传递：

 button.addEventListener("click", function() {
   setTimeout(() => checkAndRespond(this), 1500);
 });
 async function checkAndRespond(button) {
   //...
 }

旁注：

您也可以只使用 button 而不是 this ，但这可能太容易了。

checkAndRespond =是一个未声明的 (！！( 变量，请始终声明它们！