JS超时调用setTimeout和间歇调用setInterval实例分析

setTimeout函数

setTimeout函数是JS中的一个高级函数，可以实现代码的延时执行。

语法：

setTimeout(function, delay, param1, param2, ...)

• function：必选参数，是需要延时执行的函数或一个字符串经过编译生成的JS代码
• delay：必选参数，是延时时间，单位是毫秒
• param1，param2...：可选参数，是指向要传递给函数的参数，最多可以传递个数个函数的参数，参数可以是任何类型

使用示例：

// 延时1秒后，弹出“hello world”
setTimeout(function(){
    alert("hello world");
}, 1000);

setInterval函数

setInterval函数是JS中的一个高级函数，可以实现代码的循环定时执行。

语法：

setInterval(function, delay, param1, param2, ...)

• function：必选参数，是需要循环定时执行的函数或一个字符串经过编译生成的JS代码
• delay：必选参数，是定时执行的时间间隔，单位是毫秒
• param1，param2...：可选参数，是指向要传递给函数的参数，最多可以传递个数个函数的参数，参数可以是任何类型

使用示例：

// 每隔1秒弹出“hello world”
setInterval(function(){
    alert("hello world");
}, 1000);

setTimeout与setInterval的差异

setTimeout和setInterval两个函数虽然都可以实现延时执行JS代码，但是它们在实现方式上有差别。

• setTimeout函数只执行一次，执行完毕后结束；
• setInterval函数则可以在指定的时间间隔内无限循环执行。

注意事项

使用setTimeout或setInterval函数时，需要注意以下点：

1. 如果设置的时间间隔（delay）小于4毫秒，那么函数可能会被延迟执行或者忽略执行；
2. 如果设置了系统休眠模式，则setTimeout和setInterval函数可能会被暂停执行，直到系统重新被唤醒；
3. 当页面不处于激活状态（例如被最小化、后台运行等），setInterval函数会被暂停执行。

示例说明

示例一：倒计时

function countDown(){
    var countdownDom = document.getElementById('countdown');
    var time = parseInt(countdownDom.innerHTML);
    time -= 1;
    if(time <= 0){
        clearTimeout(timerId);
        countdownDom.innerHTML = "倒计时结束";
    }else {
        countdownDom.innerHTML = time;
    }
}

// 倒计时开始
var timerId = setInterval(countDown, 1000);

上述代码实现了一个简单的倒计时效果，每隔1秒钟更新一次倒计时数字，当倒计时结束后，停止执行，显示倒计时结束。

示例二：动画效果

var square = document.getElementById('square');
var step = 1;
function animation(){
    if(step < 100){
        square.style.left = (step++) + "px";
        setTimeout(animation, 10);
    }
}

// 动画效果开始
animation();

上述代码实现了一个简单的动画效果，将一个div元素从左向右移动，每10毫秒移动一个像素，当移动到100像素后，停止执行。