【JavaScript学习】超时调用和间歇调用

超时调用和间歇调用区别

超时调用：在指定的时间过后执行代码。

/**
 * setTimeout()
 * param:
 * param1——要执行的代码（可以是字符串，也可以是函数）
 * param2——以毫秒表示的时间（即在执行代码前需要等待多少毫秒）
 */
 //不建议传递字符串,传递字符串可能会导致性能损失
 setTimeout("alert('hello world')",1000);
 //推荐的调用方式
 setTimeout(function(){
     alert("hello world!");
 },1000);

调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。这个超时调用ID是计划执行代码的唯一标识符，可以通过它来取消超时调用（clearTimeout()）。

//设置超时调用
var timeout = setTimeout(function(){
     alert("hello world!");
 },1000);
//注意：把它取消
clearTimeout(timeout);

间歇调用：每隔指定的时间就执行一次代码。直至间歇调用被取消或者页面被卸载。

/**
 * setInterval()
 * param:
 * param1——要执行的代码（可以是字符串，也可以是函数）
 * param2——以毫秒表示的时间（即在执行代码前需要等待多少毫秒）
 */
 //不建议传递字符串,传递字符串可能会导致性能损失
 setInterval("alert('hello world')",10000);
 //推荐的调用方式
 setInterval(function(){
     alert("hello world!");
 },10000);

调用setInterval()之后，该方法会返回一个数值ID，表示超时调用。这个超时调用ID是计划执行代码的唯一标识符，可以通过它来取消超时调用（clearInterval()）。

var num = 0;
var max = 10;
var intervalId = null;

function incrementNumber(){
    num++;
    //如果执行次数达到了max设定的值，则取消后续尚未执行的调用
    if(num == max){
        clearInterval(intervalId);
        alert("Done");
    }
}

intervalId = setInterval(incrementNumber,500);

使用超时调用实现间歇调用

var num = 0;
var max = 10;
function incrementNumber(){
    num++;
    //如果执行次数未达到max设定的值，则设置另一次超时调用
    if(num < max){
        setTimeout(incrementNumber,500);
    }else{
        alert("Done");
    }
}
setTimeout(incrementNumber,500);

一般来说，最好是使用超时调用来模拟间歇调用。因为间歇调用可能会在前一个间歇调用结束之前启动，而使用超时调用可以避免这一点。