js中定时器的用法

原创

ithorizon 8个月前 (09-01) 阅读数 96 #Javascript

JavaScript 定时器的用法

在JavaScript中，定时器是一种非常有用的功能，它允许我们在指定的时间间隔后执行某些操作。关键有两种类型的定时器：一次性定时器（setTimeout）和周期性定时器（setInterval）。

一次性定时器（setTimeout）

setTimeout函数用于在指定的毫秒数后执行一次指定的函数或一段代码。


        function myFunction() {
            alert('这是一个一次性定时器！');
        }
        // 设置一个一次性定时器，在1000毫秒后执行myFunction函数
        setTimeout(myFunction, 1000);

周期性定时器（setInterval）

setInterval函数用于每隔指定的毫秒数周期性地执行指定的函数或一段代码。


        function myFunction() {
            console.log('这是一个周期性定时器！');
        }
        // 设置一个周期性定时器，每隔1000毫秒执行一次myFunction函数
        var intervalId = setInterval(myFunction, 1000);
        // 如果需要取消周期性定时器，可以使用clearInterval函数
        // clearInterval(intervalId);

取消定时器

可以使用clearTimeout和clearInterval函数来取消一次性定时器和周期性定时器。


        // 一次性定时器
        var timeoutId = setTimeout(myFunction, 1000);
        clearTimeout(timeoutId);
        // 周期性定时器
        var intervalId = setInterval(myFunction, 1000);
        clearInterval(intervalId);

定时器的应用示例

以下是一个使用定时器的明了示例，实现一个倒计时功能。


        var countdown = 10;
        function startCountdown() {
            setTimeout(function() {
                countdown--;
                console.log(countdown);
                if (countdown > 0) {
                    startCountdown();
                } else {
                    console.log('倒计时终结！');
                }
            }, 1000);
        }
        startCountdown();