JS setTimeout详解|极客笔记

JS setTimeout详解

在JavaScript中，setTimeout方法是一个非常常用的方法，用于在指定的时间后执行一段代码。本文将详细介绍setTimeout方法的用法以及一些常见的应用场景。

setTimeout用法

setTimeout方法接受两个参数，第一个参数是要执行的函数或者代码块，第二个参数是延迟的时间，单位为毫秒。当延迟时间到达后，setTimeout方法会执行传入的函数或者代码块。

下面是一个简单的示例，演示了setTimeout的基本用法：

setTimeout(function(){
    console.log('Hello, setTimeout!');
}, 2000);

在上面的示例中，我们传入一个匿名函数，并且设置延迟时间为2000毫秒（即2秒）。当2秒后，控制台会输出”Hello, setTimeout!”。

嵌套setTimeout

setTimeout方法可以嵌套使用，可以实现一些复杂的定时任务。下面是一个示例，演示了嵌套setTimeout的用法：

setTimeout(function(){
    console.log('Step 1');

    setTimeout(function(){
        console.log('Step 2');

        setTimeout(function(){
            console.log('Step 3');
        }, 1000);

    }, 2000);

}, 3000);

在上面的示例中，我们嵌套了三个setTimeout，每个setTimeout都在上一个setTimeout执行完成后再执行。这样可以实现一系列的定时操作。

clearTimeout方法

setTimeout方法会返回一个定时器ID，可以使用该ID来清除定时器。clearTimeout方法接受一个定时器ID作为参数，可以用来取消之前设置的setTimeout。

下面是一个示例，演示了使用clearTimeout取消setTimeout的用法：

let timeoutID = setTimeout(function(){
    console.log('This message will not be displayed');
}, 2000);

clearTimeout(timeoutID);

在上面的示例中，我们先设置了一个setTimeout，然后立即使用clearTimeout取消了这个setTimeout。因此控制台不会输出”This message will not be displayed”。

应用场景

setTimeout方法在实际的开发中有很多应用场景，下面我们来介绍一些常见的应用场景。

延迟加载

在网页开发中，有时候需要延迟加载某些资源，可以使用setTimeout来实现延迟加载的效果。比如在页面加载完成后，延迟1秒再加载某个图片：

window.onload = function(){
    setTimeout(function(){
        let img = document.createElement('img');
        img.src = 'image.jpg';
        document.body.appendChild(img);
    }, 1000);
};

动画效果

setTimeout可以用来实现简单的动画效果，比如实现一个平滑滚动的效果：

let scrollStep = 0;
let scrollDiv = document.getElementById("scrollDiv");

function smoothScroll(){
    if(scrollStep < 100){
        scrollDiv.scrollTop += 5;
        scrollStep++;
        setTimeout(smoothScroll, 10);
    }
}

smoothScroll();

定时轮询

在一些场景下，需要定时检查某个条件是否满足，可以使用setTimeout实现定时轮询。比如每隔1秒检查用户是否登录：

function checkLoginStatus(){
    if(userLoggedIn){
        console.log('User is logged in');
    }else{
        console.log('User is not logged in');
        setTimeout(checkLoginStatus, 1000);
    }
}

checkLoginStatus();