时间戳

首页 > 解决方案 > 你如何将事件传递给 setTimeout

javascript - 你如何将事件传递给 setTimeout

问题描述

我目前有：

var content = document.querySelectorAll(".content");
var myButtons = document.querySelectorAll(".more-button");

function enableContent(evt){
// remove class d-none so it can appear
    content[evt.currentTarget.param].className = content[evt.currentTarget.param].className.replace(/\bd-none\b/g, "");
}

for(var i=0; i<myButtons.length; i++){
    myButtons[i].addEventListener("click", enableContent);
    myButtons[i].param = i;
}

每个 myButton 都有自己的内容。当点击 myButton 时，我试图让内容出现缓慢，如下所示：

for(var i=0; i<myButtons.length; i++){
        myButtons[i].addEventListener("click", function(){setTimeout(enableContent, 2000, evt)}));
        myButtons[i].param = i;
}

但是不行，参数evt有问题。如何将 evt 传递给 setTimeout？

标签： javascript

解决方案

我建议通过直接设置setTimeout内部来简化解决方案enableConent

function enableContent(evt){
// remove class d-none so it can appear
    setTimeout( () => {

         content[evt.currentTarget.param].className = 
           content[evt.currentTarget.param].className.replace(/\bd-none\b/g, "");
    
    }, 2000);

}

但是如果你需要了解为什么事件没有被传递给enableContent事件处理程序，我们需要知道setTimeout函数绑定是如何工作的。

setTimeout 采用回调（将函数传递给另一个函数的花哨的词）和延迟时间（保证在x调用回调函数之前至少有时间。

所以 usingsetTimeout应该像

setTimeout( enableContent, 2000 );

但是这段代码不会传递事件，所以我们需要将函数enableContent与event objectevent object

myButtons[i].addEventListener("click", function(event){

    setTimeout( enableContent.bind(event), 2000);

});

binding injs有很多类型，隐式的、显式的、硬的和新的绑定。使用函数与事件bind绑定并返回一个新函数，该函数与事件对象有关。enalbeConenteventhard bound

推荐阅读