首页 技术 正文
技术 2022年11月8日
0 收藏 729 点赞 1,524 浏览 1191 个字

setTimeout()是js中的一类重要函数,将一段代码延迟一定时间并异步执行。但是这个函数经常不听话。在实践中,可能经常有人碰到类似下面的这种情况:

for (var i = 1; i <= 2; i++) {
setTimeout(function() { alert(i) }, 100);
}

我们期望的结果是,先隔100毫秒弹出1,再隔100毫秒弹出2。但是跑起来后,alert的两次内容都是数字3,而且紧挨着输出,并不是自己所期望的先1后2。有一种很基础的面试题是,如何合理改动代码,使它返回期望的结果?

其实很简单。在stackoverflow上早有大神解释了,可以参考这个链接

答案翻译成中文如下(并做了部分修改方便理解):

———————————————————————————

你要为每个定时器处理函数创建不同的“i”变量副本。比如这样:

function doSetTimeout(i) {
setTimeout(function() { alert(i); }, 100);
}for (var i = 1; i <= 2; ++i)
doSetTimeout(i);

 如果你不做这样的事情 (这种方法在实际上也会有其他变种),每个定时器处理函数就会共享同一作用域里的同一变量”i”。当循环完成时的”i”是多少?是3!这里通过定义一个函数来实现中介的作用,从而创建了变量的值的副本。由于setTimeout()是在该副本的上下文中调用的,所以它每次都有自己的私有的”i”以供使用。但是随着时间的推移,这些代码的效果显得有些混乱是显而易见的事实,因为设立一些时间间隔相同的连续的setTimeout()将导致所有延时处理程序同时被调用。了解设置timer(对setTimeout()的调用)几乎不消耗时间是很重要的。也就是说,告诉系统“请在1000毫秒后调用此函数”将会被立即返回,因为在timer队列中安装延时请求的过程非常快。因此,如果有一串连续的延时请求(比如我答案中的代码),而且每一个时间延迟值是相同的,那么一旦经过足够的时间,所有延时处理程序将一个接一个快速连续调用。如果你需要的是在固定时间间隔调用的处理程序,你可以使用setInterval(),行为非常类似setTimeout(),但每经过一定时间就运行一次。或者你可以调用以“时间值乘以迭代计数器”为时间间隔的setTimeout。也就是说,修改我刚才的示例代码: 

function doScaledTimeout(i) {
setTimeout(function() {
alert(i);
}, i * 5000);
}

(100毫秒超时,效果不会很明显,所以我设置的数字高达5000)

“i”值乘以基础延迟值,所以循环5次将导致分别延迟5秒,10秒,15秒,20秒,和25秒。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,488
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,903
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,736
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,487
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,127
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,289