当SetTimeout遇到了字符串

waruqi 发布于2019-08-21 14:41 / 848人阅读

摘要：也自己试了一下，发现确实不能运行字符串里面的代码。那么现在答案很明显了，既是不支持第一个参数为字符串的调用。在原先的问题中，如果是的话，由于的第一个参数支持的是函数或者是表达式，所以字符串会被自动执行，将这个字符串强制转换成一个函数。

今天闲来没事的时候，去逛逛segementFault，看了看别人提的问题。说到setTimeout和window.onload冲突。一开始我是挺疑惑他表他什么意思的，因为setTimeout和window.onload应该不会有明显的冲突吧。带着疑惑去追问。后来贴出代码的时候我就明白了,来看看他的代码中的疑惑吧。

window.onload=function(){
setTimeout("D.style.background="#990033"",2000);
}

他觉得这个代码运行的时候，setTimeout会报错，不能正确的运行指定的代码，就觉得在window.onload和setTimeout有冲突。

我对这个问题非常感兴趣。也自己试了一下，发现确实不能运行字符串里面的代码。但是还是很怀疑window.onload和setTimeout怎么可能会有冲突呢？

解决问题

为了测试方便，我就稍微改动了一下代码。将setTimeout的调用改成调用函数。

window.onload = function() {
    function myFun(i) {
        alert(1);
    }
    setTimeout("myFun(1)", 2000);
}

在这里发现的确不能运行，但是这里的问题就很明显了，我将函数的调用变成了 "myFun(1)" 的字符串调用，所以会出现不能调用 myFun() 的问题。

为了深入理解我们在W3school查询一下setTimeout的用法。

那么就是setTimeout只能接受函数或者是表达式的计算。那么现在答案很明显了，既是setTimeout不支持第一个参数为字符串的调用。

但是按照提问者的用法，这种 "D.style.background="#990033"" CSS的调用也必须准守这种形式那么怎么办？

那么就服从setTimeout的规则，说干就干，将他装换成函数就好了。见以下代码。

window.onload=function(){
setTimeout(function(){
    D.style.background="#990033"
},2000);
}

这里的2秒钟之后就会执行setTimeout里面的匿名函数，即准守了setTimeout的原则，也可以利用setTimeout来调用类似字符串的形式的功能代码。

回到提问并且深入挖掘

回到提出的问题上来，深入的挖掘，其实并不是setTimeout和window.onload有冲突，在原来的问题中，其实是Javascript作用域在作怪。

在原先的问题中，如果是 setTimeout("D.style.background="#990033"",2000); 的话，由于setTimeout的第一个参数支持的是函数或者是表达式，所以字符串会被自动执行 new Function ，将这个字符串强制转换成一个函数。

我们知道在Javascript中，函数里面有自己的作用域，和外界的作用域不同，而在函数内部并没有D.style.background这个对象，所以会有报错。在我变化的例子中，也是如此，如果使用了 setTimeout("myFun(1)", 2000)，那么这里面的字符串就会被自动执行 new Function ，所以创建出来的函数不在这个作用域内，当然也就不能调用，会出现无法找到的问题了。

GPU云服务器云服务器 setTimeout javascript settimeout js定时器setTimeout 遇到过

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87993.html

前端基础进阶（十二）：深入核心，详解事件循环机制

摘要：前端基础进阶正是围绕这条线索慢慢展开，而事件循环机制，则是这条线索的最关键的知识点。特别是中正式加入了对象之后，对于新标准中事件循环机制的理解就变得更加重要。之后全局上下文进入函数调用栈。 showImg(https://segmentfault.com/img/remote/1460000008811705); JavaScript的学习零散而庞杂，因此很多时候我们学到了一些东西，但...

whjin 2019-08-21 18:31 评论0 收藏0
事件循环机制

摘要：事件触发线程主要负责将准备好的事件交给引擎线程执行。进程浏览器渲染进程浏览器内核，主要负责页面的渲染执行以及事件的循环。第二轮循环结束。将自己读到的比较好的文章分享出来，大家互相学习，各位大佬有好的文章也可以留个链接互相学习，万分感谢！线程与进程关于线程与进程的关系可以用下面的图进行说明： showImg(https://segmentfault.com/img/bVbjSZt?...

Blackjun 2019-08-29 17:21 评论0 收藏0
事件循环机制

摘要：事件触发线程主要负责将准备好的事件交给引擎线程执行。进程浏览器渲染进程浏览器内核，主要负责页面的渲染执行以及事件的循环。第二轮循环结束。将自己读到的比较好的文章分享出来，大家互相学习，各位大佬有好的文章也可以留个链接互相学习，万分感谢！线程与进程关于线程与进程的关系可以用下面的图进行说明： showImg(https://segmentfault.com/img/bVbjSZt?...

CloudwiseAPM 2019-08-26 13:25 评论0 收藏0
彻底搞懂JavaScript执行机制

摘要：彻底搞懂执行机制首先我们大家都了解的是，是一门单线程语言，所以我们就可以得出是按照语句顺序执行的首先看这个显然大家都知道结果，依次输出，然而换一种这个时候再看代码的顺序执行，输出，，，。不过即使主线程为空，也是达不到的，根据标准，最低是。彻底搞懂JavaScript执行机制首先我们大家都了解的是，JavaScript 是一门单线程语言，所以我们就可以得出： JavaScript 是...

hizengzeng 2019-08-23 11:34 评论0 收藏0