WEB开发-JavaScript的计时（setInterval）、延时（setTimeout）和取消的学习

在前端的开发中经常会用到显示时间，倒计时，定时查询，定时循环检测等等的场景，满足这些场景的实现，我们就要学习 setInterval、clearInterval、setTimeout、clearTimeout这些方法的使用。

setInterval定义和用法

定义：按照指定的周期（以毫秒计算）来调用函数或计算表达式，此方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭停止。

语法：setInterval(code,milliseconds[,param1,param2,......])

code/function：必需，要调用的函数或要执行的代码串。

milliseconds： 必须，周期性执行或调用 code/function 之间的时间间隔，以毫秒计。

param1,param2...：可选， 传给执行函数的其他参数。

返回值：返回一个 ID（数字），将这个ID传递给 clearInterval() 取消执行。

// 计时器，每1秒取一次时间
var showTime = setInterval(function(){ 
	getTime() ;
}, 1000);
// 获取本地时间
function getTime() {
    var d = new Date();
    var time = d.toLocaleTimeString();
    document.body.innerHTML = time;
}

clearInterval定义和用法

定义：方法可取消由 setInterval() 函数设定的定时执行操作，参数必须是由 setInterval() 返回的 ID 值。

语法：clearInterval(id_of_setinterval)

id_of_setinterval：由 setInterval() 返回的 ID 值。

// 计数器，每隔1秒计数一次
var sum = 0
var count = setInterval(function(){ 
    sum+=1;
    console.log(sum);
    if(sum == 5) {
        // 清除计数
        clearInterval(count);
    }
}, 1000);

setTimeout定义和用法

定义：用于在指定的毫秒数后调用函数或计算表达式。

语法：setTimeout(code,milliseconds[,param1,param2,......])

code/function：必需，要调用的函数或要执行的代码串。

milliseconds： 必须，执行或调用 code/function 需要等待的时间，以毫秒计，默认为 0。

param1,param2...：可选， 传给执行函数的其他参数。

返回值：返回一个 ID（数字），将这个ID传递给 clearTimeout() 取消执行。

// 3秒后打印“Hello word”
var test = setTimeout(function(){
    console.log("Hello word");
}, 3000);

clearTimeout定义和用法

定义：可取消由 setTimeout() 方法设置的定时操作，参数必须是由 setTimeout() 返回的 ID 值。

语法：clearTimeout(id_of_settimeout)

id_of_settimeout：由 setTimeout() 返回的 ID 值。

var test = setTimeout(function(){
    console.log("Hello word");
}, 3000);
// 如果定时器循环执行，停止要清空定时器
clearTimeout(test);

总结

在项目中以上几个方法还是很重要的，经常会使用，尤其是在使用到异步交互的时候非常有帮助。如果使用错误会有意想不到的结果，所以要正确理解并使用。