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传递给checkAndRespond？
我对箭头功能的工作方式不了解吗？

Answer 1

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

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

setTimeout上下文是否以此形式传递给checkAndRespond？

不。您必须手动.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 =是未声明的（!!）变量，请始终对其进行声明！

通过addEventListener传递

1 个答案: