Javascript学习笔记-定时器

页面导航:首页 > 网络编程 > JavaScript > Javascript学习笔记-定时器

Javascript学习笔记-定时器

来源: 作者: 时间:2016-02-01 09:31 【

简介JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成。TimeoutsetTimeout功能:指定某个函数或某段代码,在多少毫秒之后执行语法:

简介

Script提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成。

Timeout

setTimeout

功能:指定某个函数或某段代码,在多少毫秒之后执行 语法:var timerId = setTimeout(func|code, delay) 参数
Javascript语句字符串或者函数:要被执行的代码 时间间隔(毫秒):指示从当前起多少毫秒后执行第一个参数 返回值:一个整数,表示定时器的编号,以后可以用来取消这个定时器

实例

//Javascript语句字符串
setTimeout("alert('5 seconds!')", 5000);
//函数
setTimeout(function() {
    alert('5 seconds!');
}, 5000)

clearTimeout

功能:取消指定的定时任务,已经开始执行的任务无法取消(?) 参数:定时事件id,即setTimeout执行后的返回值 返回值:undefined

实例:

var timedTaskId = setTimeout("alert('5 seconds!')", 5000);
clearTimeout(timedTaskId);

Interval

setInterval

功能:按照指定的周期(以毫秒计)来调用函数或计算表达式 语法:setInterval(code,millisec[,”lang”]) 参数
code:必需,要调用的函数或要执行的代码串 millisec:必须,周期性执行或调用 code 之间的时间间隔,以毫秒计 返回值:一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值

示例:

 //Javascript语句字符串
setInterval("alert('5 seconds!')", 5000);
//函数
setInterval(function() {
    alert('5 seconds!');
}, 5000)

clearInterval

功能:取消由 setInterval() 设置的定时任务 语法:clearInterval(id_of_setinterval) 参数
id_of_setinterval:由 setInterval() 返回的 ID 值 返回值:undefined

示例

var timedTaskId = setInterval("alert('5 seconds!')", 5000);
clearInterval(timedTaskId);

运行机制

参考《 标准参考教程》的定时器的运行机制


常见问题

带循环调用的定时任务

可以通过创建一个函数循环重复调用setTimeout来实现类似setInterval的功能,示例如下所示:

function showTime() {
    var today = new Date();
    alert( " The time is: " + today.toString());
    setTimeout( " showTime() " , 5000 );
}
showTime();

上面展示的代码实现的功能,可以使用setInterval实现代码如下所示:

function showTime() {
    var today = new Date();
    alert( " The time is: " + today.toString());
}
setInterval("showTime()", 5000);

转载:这两种方法可能看起来非常像,而且显示的结果也会很相似,不过两者的最大区别就是,setTimeout方法不会每隔5秒钟就执行一次showTime函数,它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完,那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行一次那个函数。如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout

回调函数传参

setTimeout可以在第二个参数后加入更多的参数,这些参数依次作为回调函数调用时的参数使用,但是IE9.0及以下版本不支持。示例:
function add(a, b) {
console.log(a + b);
}
setTimeout(add, 1000, 1, 1); 匿名函数调用回调函数传参。示例:
function add(a, b) {
console.log(a + b);
}
setTimeout(function() {
add(1, 1);
}, 1000); 使用bind方法,把多余的参数绑定在回调函数上面,生成一个新的函数驶入setTimeout。示例:
function add(a, b) {
console.log(a + b);
}
setTimeout(add.bind(null, 1, 1), 1000); 自定义setTimeout,使用apply方法将参数输入回调函数

注:setInterval的回调函数的参数问题同setTimeout

回调函数作用域问题

定时器默认的回调函数在执行时的作用域指向全局环境,而不是定义该回调函数的的对象。解决办法:
1. 匿名函数内部使用回调函数的归属对象来调用,或者使用apply来修改作用域
2. 使用bind方法,将回调函数的作用域绑定在指定对象上

取消所有的定时任务

setTimeout和setInterval函数,都返回一个表示计数器编号的整数值,将该整数传入clearTimeout和clearInterval函数,就可以取消对应的定时器。setTimeout和setInterval返回的整数值是连续的,也就是说,第二个setTimeout方法返回的整数值,将比第一个的整数值大1。利用这一点,可以写一个函数,取消当前所有的setTimeout。示例:

(function() {
  var gid = setInterval(clearAllTimeouts, 0);

  function clearAllTimeouts() {
    var id = setTimeout(function() {}, 0);
    while (id > 0) {
      if (id !== gid) {
        clearTimeout(id);
      }
      id--;
    }
  }
})();

注:本段摘自《JavaScript 标准参考教程》-定时器篇

setTimeout(f,0)

通过学习定时器的运行机制可以知道,f不会立即执行,它必须等到当前脚本的同步任务和“任务队列”中已有的事件,全部处理完后,才会执行。更多请参考《JavaScript 标准参考教程》-定时器的setTimeout(f,0)含义

时间间隔的最大值

32位数字,超过了为溢出,直接取0


应用

输入框防抖动

参考《JavaScript 标准参考教程》-定时器的clearTimeout实际应用

setTimeout(f,0)

根据setTimeout(f,0)的特性,它有很多应用场景,更多请参考《JavaScript 标准参考教程》-定时器的setTimeout(f,0)应用


参考文献

w3school-JavaScript 计时 w3school-HTML DOM setInterval() 方法 w3school-HTML DOM clearInterval() 方法 阮一峰-定时器

版权声明:本文为博主原创文章,未经博主允许不得转载。

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<