美文网首页
有关 setTimeout没有延时 立即执行的问题

有关 setTimeout没有延时 立即执行的问题

作者: 雪河冰兰 | 来源:发表于2017-03-30 18:24 被阅读310次

    先上一个简单的例子:

    var example = document.getElementById("example");
      function toRed(obj) {
      obj.style.background = "red";
    }
    
    //方法1
    setTimeout(toRed(example),2000);
    
    //方法2
    setTimeout(function() {
        toRed(example);
     }, 2000);
    

    功能上就是想实现在2000ms之后将example这个div背景变红。
    效果是方法1,没有进行时延,直接变红,看不到任何延时,而第二个则没有任何问题。
    这个问题明显超出了我平时的认知范围,那么问题出在哪里了呢?

    1.难道必须用function(){}这样?

    答案当然不是。
    那么我的方法1哪里不对了呢?因为函数名后面写了()。
    对的,加了()就是直接执行了的。
    突然想起来之前写的没有问题的都是不加()的函数名放在哪里。
    但我这里为什么加了?因为函数必须传入参数obj才知道对谁改变背景颜色呀?这该怎么办?

    2.怎么处理这种需要传入参数的函数?

    我能想到:

    1. 如方法2一般,加上function(){}包裹住,那么就好啦,这样就是个异步函数啦
    2. 看下面的代码
    setTimeout("toRed(example)",2000);
    

    有什么区别?其实是多了个“”把函数给包起来了,这样也可以顺利的时延2000ms再变颜色啦。
    那么这个的原理是什么呢?
    其实传入字符串之后,js自动会用eval函数对其进行执行,如果不加“”那么就会直接执行了。

    结论

    以后我再写setTimeout还是要小心点,不能随随便便把有参数的函数放在哪里,还是加个function(){}包裹这最为稳妥,就像我用到addEventListener的时候,如果不包裹一下,里面该传入的e要不就传不进去,要不就你本来不能用参数啦。

    相关文章

      网友评论

          本文标题:有关 setTimeout没有延时 立即执行的问题

          本文链接:https://www.haomeiwen.com/subject/dcupottx.html