addEventListener + setTimeout

Question

这是我第一次在addEventListener()方法中遇到这样的问题。当我尝试将其与setTimeout一起使用时，即使addEventListener具有"click“属性，也会自动调用该函数。

<button id="test">Test</button>

document.getElementById("test").addEventListener("click", setTimeout(myFunc, 2000));

function myFunc() {
  console.log("Hello");
}

Answer 1

这就是你想要的。

​

document.getElementById("test").addEventListener("click", function(){setTimeout(myFunc, 2000)});

function myFunc() {
  console.log("Hello");
}

<button id="test">Test</button>

​

Answer 2

您可以在调用的函数中使用setTimeout。小提琴手

document.getElementById("test").addEventListener("click", myFunc);

function myFunc() {
    setTimeout(function(){
      console.log("Hello");
    }, 6000);
}

Answer 3

您可以保留与现在完全相同的代码，但是可以通过curry通过bind调用函数，而不是尝试将其作为参数传递。

​

document.getElementById("test").addEventListener("click", setTimeout.bind(null, myFunc, 2000));

function myFunc() {
  console.log("Hello");
}

<button id="test">Click</button>

​