js定时功能的介绍

概述

在js动画中我们经常用到定时器这种工具,它也确实很好用。
其中js内置的setInterval()与setTimeout()函数提供了定时的功能,前者是每隔几秒执行一次,后者是延迟一段时间执行一次。此外,javascript内置的clearInterval()函数用于取消定时器功能。

setInterval()函数

setInterval()函数可按照指定的周期(以毫秒计)来调用函数或计算表达式。它可以无限执行下去,也可以通过clearInterval()函数清除掉 。

//它的基本语法如下:
var timer= setInterval(code, delay);
//其中code是执行的代码,它可以是一个function执行函数,delay是指定的周期,以毫秒计,每过多少毫秒执行一次前面的代码。

举个例子

var fn=function(){  
    console.log("fn()函数被执行了");  
}   
setInterval(fn,1000);//每隔1min控制台输出一次 

setTimeout()函数

setTimeout()在指定的延迟时间之后调用一个函数或者执行一个代码片段,使用clearTimeout()函数可取消由 setTimeout() 方法设置的延迟调用。

//它的基本语法跟setInterval()差不多:
var timer= setTimeout()(code, delay);
//其中code是执行的代码,它可以是一个function执行函数,delay是代码执行延迟的时间,也是以毫秒计。

举个例子

setTimeout(function() {  
console.log(1);  
}, 1000); //延迟1min后在控制台输出1;

再比如:

setTimeout(function() {  
console.log(1);  
}, 0);  
console.log(2);  
//执行结果是:先输出2,再输出1。  

使用setTimeout()函数优化setInterval()函数的方案

一般不用setInterval()函数,而用setTimeout()函数的延时递归来代替setInterval()函数。setInterval()函数会产生回调堆积,特别是时间很短的时候。
方案一:

var timeout = false; //启动及关闭按钮    
function time() {  
    if(timeout) return;  
    console.log(1);  
    setTimeout(time,1000);  
}  
time();  

方案二:

var fn=function(){  
console.log(1);  
setTimeout(fn, 1000)  
}  
fn();  

最后说一下clearInterval()函数和 clearTimeout()函数的语法。这个很简单,只要将前面的定时器赋予一个变量,然后在clearInterval()函数或 clearTimeout()函数小括号中写上这个变量名就可以清除定时器了。
以上就是我对定时器的一些简单想法,希望大家能够喜欢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容