从setTimeout,onclick传参看js函数作为参数

setTimeout传参

我们最先想到是这样:

setTimeout(doSomething1(123),1000);

function doSomething1(content){
    console.log(content);
}

但是这样写,123立马打印出来,并没有等待1s。这是因为,这样写会直接调用doSomething1(123),然后将其返回的结果作为第一个参数运行setTimeout,分解开就是:

var temp = doSomething1(123);
setTimeout(temp,1000);

所以,既然temp是返回值,如果temp是一个函数那就达到我们的目的了,可以这样写:

 ssetTimeout(doSomething1(123),1000);

//这样就可以了
function doSomething2(content){
   return function(){
            console.log(content);
        }
}

onclick传参

和上面道理一样,也是不能直接传参:

var box = document.getElementById("box");
box.addEventListener("click",doSomething1("123"))

function doSomething1(content){
           console.log(content);
       }

修改如下就可以:

var box = document.getElementById("box");
box.addEventListener("click",doSomething2("123"))

function doSomething2(content){
           return function(){
               console.log(content);
           }
       }

这样我们也理解了,为什么box.addEventListener("click",onClick())也不行,而只能是box.addEventListener("click",onClick)了。

然而,修改之后虽然可以传参了,但是返回的是一个匿名函数,也就是说,这个事件监听没有办法取消。所以,还是不要用传参比较好,可以使用全局变量。


总之,函数作为另一个函数的参数时,就要小心:是传入函数对象,而不是函数调用后的结果


版权声明:本文为ruangong1203原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。