Блог

В настоящее время у меня есть:

 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-noneb/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?

Я бы предложил упростить решение, установив 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-noneb/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 связана с объектом события.

Вам нужно передать событие (evt) в саму функцию, и я думаю, может быть, вы неправильно используете setTimeout, может быть, вам не нужно использовать setTimeout? Вы можете использовать анимацию css или переход со свойствами *-delay?

Но если вы используете 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 /

Проще простого!

window.addEventListener(«загрузка», (событие)=> {

 let setTimeoutHandler = (event) =>{
    console.log(event);
}

setTimeout(()=>{
    setTimeoutHandler(event);
}, 1000);
  

});