码迷,mamicode.com
首页 > Web开发 > 详细

JS中的间歇调用setInterval()与超时调用setTimeout()相关总结

时间:2016-01-10 00:16:07      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

超时调用需要使用window.setTimeout(code,millisec)方法

它接受两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒)。其中第一个参数可以是一个包含JS代码的字符串(就和在eval()函数中使用的字符串一样),也可以是一个函数。第二个参数表示等待多长时间的毫秒数,但经过该事件后指定的代码不一定会执行

这是因为JS是一个单线程序的解释器,一定时间内只能执行一段代码,为了控制要执行的代码就有一个JS任务队列,这些任务会按照将他们添加到队列的顺序执行。

setTimeout()的第二个参数告诉JS再过多长时间把当前任务添加到队列中。若队列为空,这段添加的代码会立即执行,若不为空,就要等前面的代码执行完再执行。

//不建议传递字符串!可能会导致性能损失
setimeout("alert(‘hellow world!‘)",1000);
//推荐以匿名函数调用方式
var timeoutId = setTimeout(function(){
    alert("hellow world!");      
},1000);


clearTimeout(timeoutId);

  调用setTimeout()之后,该方法会返回一个数值ID,ID是计划执行代码的唯一标示符,可以通过clearTimeout(ID)来取消未执行的超时调用.

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

间歇调用的方法是setInterval(),接受的第一个参数是要调用的函数或要执行的代码串。,第二个参数是周期性执行或调用 code 之间的时间间隔,以毫秒计。

调用setInterval()方法同样会返回一个ID,该ID可用于在将来某个时刻取消间歇调用。取消间歇调用的重要性要远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面卸载。

var num = 0,
    max = 10,
    intervalId = null;
function incrementNumber(){
    num++;
    if(num = = max){
        clearInterval(intervalId);
       alert("Done");
    }
}
//以函数名调用方式
intervalId = setInterval(incrementNumber,500);

  在开发环境中,很少使用真正的间歇调用,原因是后一个调用可能会在前一个调用结束之前启动(设置的周期时间millisec过短或函数代码code执行时间过长),所以最好不要使用间歇调用。

问题: JavaScript中setInterval传参常见的问题(setInterval第一个参数加引号与不加引号区别)

function fun() {
    console.log("1");
}
    setInterval("fun()",1000);//全局作用域下正常执行
    setInterval(fun(),1000); //调用函数正常,setInterval调用出错
    setInterval(fun,1000);  //正确
    setInterval(function(){ //匿名函数调用
        console.log("1");
    })

如例子中所示,setInterval 第一个参数 可以是函数名、匿名函数、函数的引用以及其他可执行代码。

setInterval("fun()",1000)

这种加引号的方式就可以理解为 可执行代码  就行eval() 一样去执行第一个参数,就是对fun方法的调用 理所当然的弹出 1  一秒钟间隔,一直执行。

setInterval(fun(),1000)

fun() 是对函数的直接调用,也就是说当setInterval还没有开始函数fun就执行了。如果这个函数没有返回值或者返回值不是可执行的函数或者其他的代码的话,就以上代码而言只是弹出一个1之后就停止了,这种方法无意义。

setInterval(fun,1000)

此时setInterval的第一个参数fun看作参数为 函数名或函数的引用。

我个人认为更推荐以匿名函数的方式调用最好。

JS中的间歇调用setInterval()与超时调用setTimeout()相关总结

标签:

原文地址:http://www.cnblogs.com/jesse131/p/5117547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!