浅谈setTimeout 与 setInterval_javascript技巧

最新写代码中时,看到项目中有人用到了 setTimeout(fun,0),于是想总结一下。个人理解,如果有错误的地方还请指出。THX

  要想理解JavaScript的定时器是如何工作的,先要明白 JavaScript 引擎是单线程的。这个可以理解为 javascript 引擎是一个服务员,它有一个服务的队列,所有的界面元素事件,定时触发器回调,异步请求回调都要在这个任务队列里排队,等待处理。所有任务都是一个最小单位,不会中断处理。这样就可以理解 setTimeout(fun,0) 了,它并不是代表立即执行该代码,除非任务队列为空(事实上,各个浏览器在实际执行这个的时候也是有差异了,比较新的浏览器实际可能是在4ms;老版本的可能更长一点,16ms也是可能的)。而 setTimeout(fun,time) 的意思就是多少时间后将 fun 回调加到这个任务队列中,也就是至少需要time时间才会执行fun。

  举个例子:

setTimeout(function () {
 console.log(1);
}, 0);
var tem = 0;
for (var i = 1; i < 1000000; i++) {
 tem += i;
};
console.log(2);

显示结果为

复制代码 代码如下:

2
1

  就是说,在执行 setTimeout 时,将 function 回调加入了任务队列,但并没有立即执行,因为js引擎还在忙着处理当前的js,而只在这段代码段执行完才去任务列表里取新的任务,所以结果就是先显示 2 后显示 1。

  setInterval(fun, time)方法是,每隔一定时间将fun添加到队列中,那么问题来,如果fun执行时间比 time 要长的时候怎么办?

  看一段代码

var num = 0;
var time = setInterval(function () {
 var tem = 0;
 for (var i = 1; i < 99999999; i++) {
 tem += i;
 };
 num ++;
 console.log(num);
}, 100);

setTimeout(function (){
 clearInterval(time);
}, 1000);

  意思是每隔100ms执行一段代码,在1s中后清除这个定时器。但是结果呢?

  显示结果为

复制代码 代码如下:

1
2
3

  也就是说,事实上,并没有执行到那么多次数。也就是说某些间隔会被跳过,这也就存在多个代码执行的间隔可能会比预期的小。原来在将定时器代码加入队列的时候,如果该定时器的代码实例存在时,该次定时器代码会被跳过。

  引用一张图片,就很好理解了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索setinterval
settimeout
浅谈英语课堂导入技巧、浅谈散文写作技巧、浅谈数学中的变形技巧、浅谈纹绣飘眉经营技巧、浅谈工程施工投标技巧,以便于您获取更多的相关知识。

时间: 2024-11-05 14:49:59

浅谈setTimeout 与 setInterval_javascript技巧的相关文章

佛山SEO:浅谈关键词策略与技巧

佛山SEO浅谈关键词策略与技巧(SEO及其关键词策略): 虽然关键词元标签是排名前列的金钥匙时代已经一去不复返,但关键词技术仍然是良好SEO的关键技术之一.只是它们的应用范畴发生了变化而已,SEO不再会把多个关键词堆砌在元标签中以获得高排名,而是去发现那些对业务最有意义的关键词,并用之于提高网站流量.关键词是用户在搜索相关页面时使用的单词或短语,也是搜索引擎在建立索引表要使用的单词.选择关键词是最重要的SEO任务之一,但往往缺乏讨论和研究.没有正确的关键词,SEO工作将事倍功半. 要了解消费者要

浅谈javascript属性onresize_javascript技巧

浅谈javascript属性onresize //获取屏幕宽度并动态赋值 var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = docum

浅谈seo优化基本技巧

由于工作需要,本人简单的分析总结了一下seo优化的基本技巧,下面给大家分享一下. 1. 认识seo seo简单的说就是搜索引擎优化. 2. seo作用:经过seo优化的网站更容易被搜索引擎收录,更容易提高网站的关键字在搜索引擎中的排名,从而提高网站的流量和排名! 3. seo的影响因素有3点:网站的内容和功能.域名.主机. a.网站的内容和功能.开发一个网站就像种一棵树,而seo优化网站就像栽培一棵树.种一棵树并不难,但要把这棵树栽培好,让它茁壮成长起来并不是一件易事,需要花费巨大的时间和精力.

望闻问切 浅谈诊断SEO的技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 望闻问切-诊断seo的技巧,诊断网站seo的情况一直是一种学问,我们应该如何掌握这样一种学问呢?那么笔者呢,就用自己的网站经历来说一下望闻问切的具体实施事项,毕竟诊断seo的技巧往往就是体现在我们每天所接触的网站中,而在实际操作中,我们才能真正掌握这方面应该属于我们的价值观和学习性质. 很多人都认为seo就是简简单单的认为外链啊,内容啊之类的

浅谈百度经验和推广技巧

站长朋友们每天都在为怎样推广自己的网站而发愁着,每天都有不同的方法被发现.那站长朋友们还记得这个上线不久的百度经验么?这是自百度知道之后又一经典,大家都知道百度很注重自己的产品,像百度知道,百度经验,百度空间收录都是很快的.今天就和大家一起分享下百度经验. 一.经验和知道的区别 百度知道是帮用户解决各种问题,是由一个人提出,然后另个人回答的方式.而经验是集中"怎样做","怎么办"等问题.一个完整的经验里包括:概述,工具,步骤,注意事项,参考资料几个部分.经验解决的一

A5 SEO诊断浅谈百度经验的提交技巧

百度经验主要是分享一个事情的过程,做法,和知道不一样.所以在做经验时一定要注意经验的步骤的描述,每步做法尽量做到详细,最好概括性很强,能够让读者立即看明白,马上就知道应该如何操作,今天A5 SEO诊断优化小组就来说下百度经验提交的一些技巧: 题目简短概括性强 题目要简短,最好是"**的做法"或是"**怎么做"等,经验和软文不一样,不需要特别雷人的题目,它要的是实在的方法和步骤.要让用户看了题目就知道你这篇文章是说什么的,主要教大家什么东西的,因此, A5 SEO诊断

浅谈setTimeout 与 setInterval

  实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.不过这两个函数还是有区别的 最新写代码中时,看到项目中有人用到了 setTimeout(fun,0),于是想总结一下.个人理解,如果有错误的地方还请指出.THX 要想理解JavaScript的定时器是如何工作的,先要明白 JavaScript 引擎是单线程的.这个可以理解为 javascript 引擎是一个服务员

BOM系列第一篇之定时器setTimeout和setInterval_javascript技巧

setTimeout() setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行.它返回一个整数,表示定时器的编号,这个值可以传递给clearTimeout()用于取消这个函数的执行 以下代码中,控制台先输出0,大概过1000ms即1s后,输出定时器setTimeout()方法的返回值1 var Timer = setTimeout(function(){ console.log(Timer); },1000); console.log(0); 也可以写成字符串参数的形式,由

理解javascript定时器中的setTimeout与setInterval_javascript技巧

一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 setTimeout: var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); var timeoutID = window.setTimeout(code, delay); timeoutID 是该延时操作的数字ID,