setTimeout('yourFunction()',); //5秒后执行yourFunction(),只执行一次
setInterval('yourFunction()',); //每隔5秒执行一次

1、setTimeout(funhander,time)的作用是在过time毫秒后,执行一次句柄funhander指向的方法。而setInterval(funhander,time)的作用是,每隔time毫秒后,就执行一次句柄funhander指向的方法。一直到我清掉计时器停止或者关闭窗口。

2、在设定时器的时候一定要有返回值,清掉定时器的时候需要使用,也是一个好的习惯。设置的相应计时器需要用clearTimeout(对象)和clearInterval(对象)清掉。

3、setTimeout(a(),500),在500毫秒后只执行1次方法a(),而setInterval(a(),500)是每隔500毫秒执行一次方法a()。也就是说如果不把前者放在循环里,就不能实现后者的循环功能。怎样循环调用setTimeout(a(),500)方法来来实现setInterval(a(),500)的功能呢?
function a(){
....... //其它代码
setTimeout('a()',); //5秒后运行a()函数
}

两个方法能实现同样的效果,但是还是有区别的。假设需要10秒时间运行a()方法里的其它代码,也就是说第一次运行至代码setTimeout('a()',5000)需要10秒。之后5秒钟再次运行a()方法,则第二次运行至代码setTimeout('a()',5000)需要25秒。若用setInterval(a(),5000),不管a()方法需要多少时间运行,都是每隔5秒运行一次。如果不希望连续调用产生互相干扰的状况就用前者,如果希望每隔固定时间精确的执行某个动作就用后者。认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行的

4、
function click() {
// code block1...
setTimeout(function() {
// process ...
}, );
// code block2
}

假设我们给一个button的onclick事件绑定了此方法, 当我们按下按钮后, 肯定先执行block1的内容, 然后运行到setTimeout的地方, setTimeout会告诉浏览器说, "200ms后我会插一段要执行的代码给你的队列中", 浏览器当然答应了(注意插入代码并不意味着立马执行), setTimeout代码运行后, 紧跟其后的block2代码开始执行, 这里就开始说明问题了, 如果block2的代码执行时间超过200ms, 那结果会是如何? 或许按照你之前的理解, 会理所当然的认为200ms一到, 你的process代码会立马执行...事实是, 在block2执行过程中(执行了200ms后)process代码被插入代码队列, 但一直要等click方法执行结束, 才会执行process代码段, 从代码队列上看process代码是在click后面的, 再加上js以单线程方式执行, 所以应该不难理解. 如果是另一种情况, block2代码执行的时间<200ms, setTimeout在200ms后将process代码插入到代码队列, 而那时执行线程可能已经处于空闲状态了(idle), 那结果就是200ms后, process代码插入队列就立马执行了, 就让你感觉200ms后, 就执行了.

5、再看看setInterval 
这里可能会存在两个问题: 
1.时间间隔或许会跳过 
2.时间间隔可能<定时调用的代码的执行时间 
function click() {
// code block1...
setInterval(function() {
// process ...
}, );
// code block2
}

比如onclick要300ms执行完, block1代码执行完, 在5ms时执行setInterval, 以此为一个时间点, 在205ms时插入process代码, click代码顺利结束, process代码开始执行(相当于图中的timer code), 然而process代码也执行了一个比较长的时间, 超过了接下来一个插入时间点405ms, 这样代码队列后又插入了一份process代码, process继续执行着, 而且超过了605ms这个插入时间点, 下面问题来, 可能你还会认为代码队列后面又会继续插入一份process代码...真实的情况是,由于代码队列中已经有了一份未执行的process代码, 所以605ms这个插入时间点将会被"无情"的跳过, 因为js引擎只允许有一份未执行的process代码

 

setTimeout()和setInterval()方法的区别的更多相关文章

  1. setTimeout与setInterval方法的区别

    setTimeout与setInterval方法的区别 setTimeout()用于设定在指定的时间之后执行对应的函数或代码.,在全局作用域下执行 setTimeout(code,time[,args ...

  2. JS中SetTimeOut和SetInterval方法的区别?

    1.setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 ...

  3. setTimeout()和setInterval()方法的区别?

    因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执 ...

  4. etTimeout与setInterval方法的区别

    etTimeout与setInterval方法的区别 setTimeout()用于设定在指定的时间之后执行对应的函数或代码.,在全局作用域下执行 setTimeout(code,time[,args… ...

  5. setTimeout()与setInterval()方法区别介绍

    计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别,下面为大家简单介绍下,希望对大家有所帮助   计时器setTimeout()和setInterval ...

  6. 20180904 定时器setTimeout和setInterval回调问题

    引用: setTimeout和setInterval两者的区别 setTimeout和setInterval的优缺点 setTimeout和setInterval详解 两者的作用都是在定时多少毫秒后回 ...

  7. JavaScript - setTimeout()和setInterval()

    setTimeout() 和 setInterval() 方法, 用于在指定的毫秒数后调用函数或表达式 // 1秒钟后执行 function(), 只执行一次 var a = setTimeout(f ...

  8. setTimeout 和 setInterval 的区别

    setTimeout (表达式,延时时间)setInterval(表达式,交互时间)延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout   在执行时,是在载入后延迟指定时间 ...

  9. javascript中的两个定时函数setTimeOut()和setInterVal()的区别

    js中经常性要用到间隔几秒或暂停几秒执行某个函数, 简单介绍我从网上收集到setTimeOut()和setInterVal()的区别1.setInterVal()介绍 1)定义 setInterval ...

随机推荐

  1. 201621044079WEEK作业08-集合

    作业08-集合 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 如 ...

  2. 用svmpredict输出的结果为空

    源程序:

  3. HtmlHelper扩展实例

    namespace System.Web.Mvc{    public static  class MyHttpHelperExt    { public static string MyLabel( ...

  4. POJ 2785 4 Values whose Sum is 0(折半枚举)

    给出四个长度为n的数列a,b,c,d,求从这四个数列中每个选取一个元素后的和为0的方法数.n<=4000,abs(val)<=2^28. 考虑直接暴力,复杂度O(n^4).显然超时. # ...

  5. BZOJ 1022 小约翰的游戏(anti-sg)

    这是个anti-sg问题,套用sj定理即可解. SJ定理 对于任意一个Anti-SG游戏,如果定义所有子游戏的SG值为0时游戏结束,先手必胜的条件: 1.游戏的SG值为0且所有子游戏SG值均不超过1. ...

  6. HTML5 不再支持哪些元素

    HTML5中已经不支持以下的元素,不建议在进行开发时再使用以下的元素. 1.acronym(建议abbr):定义首字母缩写 2.applet(建议object):定义applet 3.basefont ...

  7. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

  8. [洛谷P3550][POI2013]TAK-Taxis

    题目大意:一条路上有三个点,$0$为起始位置,$d$为总部,$m$为家.有$n$辆车,每辆车最多行驶$x_i$,都从$d$出发,可以在任意位置结束,问最少几辆车可以到家. 题解:贪心,发现当人在$[0 ...

  9. BZOJ1597 & 洛谷2900:[USACO2008 MAR]Land Acquisition 土地购买——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1597 https://www.luogu.org/problemnew/show/P2900 约翰准 ...

  10. HDOJ(HDU).3466 Dividing coins ( DP 01背包 无后效性的理解)

    HDOJ(HDU).3466 Dividing coins ( DP 01背包 无后效性的理解) 题意分析 要先排序,在做01背包,否则不满足无后效性,为什么呢? 等我理解了再补上. 代码总览 #in ...