Question

我目前有：

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？

Answer 1

我建议直接在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时间，然后再调用回调函数。

因此使用setTimeout应该像

setTimeout( enableContent, 2000 );

但是此代码不会传递事件，因此我们需要将功能enableContent与event object绑定在一起，以便在调用事件处理程序时，该功能知道并正确访问event object

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

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

});

js中的

绑定具有很多类型，隐式，显式，硬性和新绑定。使用bind函数将enalbeConent与event绑定，并返回带有事件对象的hard bound新函数。

Answer 2

您需要将事件（evt）传递给函数本身，我认为也许您使用 setTimeout 的方式出错了，也许您不需要使用 setTimeout ？您可以将CSS 动画或转场与* -延迟属性一起使用吗？

但是，如果您使用的是 setTimeout ，则需要在每次点击后使用 clearTimeout 方法清除超时：

myButtons[i].addEventListener("click", function(evt) {
   if(evt.currentTarget.timer) {
       clearTimeout(e.currentTarget.timer);
   }
   evt.currentTarget.timer = setTimeout(enableContent, 2000);
}));

示例：https://jsfiddle.net/6kcq2ma8/

如何将事件传递给setTimeout

2 个答案: