大家看下如下代码,猜猜执行结果:
var start = new Date; setTimeout(function(){ console.log('时间流逝了:'+(new Date - start)+'毫秒'); }, 200); while (new Date - start < 1000) {} console.log(1); function doSoming(){ setTimeout(function(){ console.log('时间又流逝了:'+(new Date - start)+'毫秒'); },10); } doSoming(); while (new Date - start < 2000) {} console.log(2);
结果是:
约1秒后输出:1,
再过约1秒后输出:2,
接着才立即输出:时间流逝了: 2002 毫秒
最后输出:时间又流逝了: 2003 毫秒
您猜对了没?
这里通过setTimeout来延迟执行的函数都被推到最后才执行了;
原理如下:
在现有浏览器环境中,Javascript执行引擎是单线程的,主线程的语句和方法,会阻塞定时任务的运行,在Javascript执行引擎之外,存在一个任务队列,当在代码中调用setTimeout()方法时,注册的延时方法会挂到浏览器内核其他模块处理,当延时方法到达触发条件,即到达设置的延时时间时,该模块再将要执行的方法添加至该模块的任务队列中。这一过程与执行引擎主线程独立,执行引擎在主线程方法执行完毕,到达空闲状态时,才会从该模块的任务队列中顺序提取任务来执行,这期间的时间,可能大于注册任务时设置的延时时间;
浏览器在空闲状态下,会不断的尝试从模块的任务队列中提取任务,这称为事件循环模型;
再回头看下前面的代码,第二个setTimeout()的延迟方法的延迟时间是10毫秒,比第一个要早触发啊!为什么执行结果却在后面?因为它被之前的代码阻塞了约1000.5~1001毫秒了(视浏览器的处理速度),等他挂到处理模块,等到触发时间添加进任务队列时,第一个setTimeout()的延迟方法早就被添加到模块的任务队了,而引擎主线程是按顺序提取得,所以,你应该懂了吧?
现在,如果把上面的while (new Date - start < 1000) {}改成while (new Date - start < 189) {}或者是while (new Date - start < 190) {},结果又是什么?我就不多说了!各刷新浏览器20遍,自己看结果吧!
而setInterval()方法和setTimeout()地位是相同的,调用setInterval()方法时,注册的延时方法挂到模块处理,每当触发时间到达,就往任务队列添加一次要执行的方法;
下面来具体看看setTimeout的语法:
var timeID = window.setTimeout(func,delay,[param1,param2,...]);
var timeID = window.setTimeout(code,delay);
setTimeout和setInterval是Window对象的方法(可省略window),第二个之后的可选参数(IE9及旧版不支持)是传递给func的参数,每次调用他们时都会返回一个数字ID(在浏览器中打印出来就只是个数字,而本人在webstorm中打印出来发现它实际是一个对象,有很多个属性),这个ID保持着它对应的setTimeout或setInterval的相关信息,主要用来在中模块中和任务队列中清除(或关闭)掉它们(用方法clearTimeout(ID)和clearInterval(ID))。
如果你需要向你的回调函数内传递一个参数以下是兼容IE的写法
if (document.all && !window.setTimeout.isPolyfill) { var __nativeST__ = window.setTimeout; window.setTimeout = function (vCallback, nDelay, param1, param2,param3) { var aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback instanceof Function "htmlcode">for(var i =0; i <10; i++){ setTimeout(function(){ console.log(i); },1000); }上面的代码只会输出数字 10 十次。为什么?闭包!
当 console.log 被调用的时候,虽然匿名函数保持对外部变量 i 的引用,但此时 for循环已经结束, i 的值被修改成了 10.
为了得到想要的结果,需要在每次循环中创建变量 i 的拷贝。
为了正确的获得循环序号,最好使用 匿名包裹器(其实就是我们通常说的自执行匿名函数)。
for(var i =0; i <10; i++){ (function(e){ setTimeout(function(){ console.log(e); },1000); })(i); }外部的匿名函数会立即执行,并把 i 作为它的参数,此时函数内 e 变量就拥有了 i 的一个拷贝。
当传递给 setTimeout 的匿名函数执行时,它就拥有了对 e 的引用,而这个值是不会被循环改变的。
有另一个方法完成同样的工作;那就是从匿名包装器中返回一个函数。这和上面的代码效果一样。for(var i =0; i <10; i++){ setTimeout((function(e){ return function(){ console.log(e); } })(i),1000) }还有一个重要应用:函数节流(throttle)与函数去抖(debounce)
请看我从网上收集的一些资料:
JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)
参考链接:
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout
http://www.alloyteam.com/2015/10/turning-to-javascript-series-from-settimeout-said-the-event-loop-model/#prettyPhoto以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
js,setTimeout
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。