setInterval()定时调用和setTimeout()延时调用的使用

刘昕hrf

已于 2023-03-12 22:10:42 修改

阅读量374

点赞数

文章标签： javascript 前端 html5

于 2023-03-12 21:44:03 首次发布

本文链接：https://blog.csdn.net/weixin_43447266/article/details/129481742

版权

setInterval()定时调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
</head>
<body>
    <h1 id="count">1</h1>
    
</body>
</html>

<script type="text/javaScript">
    window.onload = function(){
        //获取count
        var count = document.getElementById("count");
        //使count中的内容，自动切换
        // for(var i= ; i<10 ; i++){
        //     count.innerHTML = i
        //     };

        /*
            setInterval()
            定时调用
            可以将一个函数，每隔一段时间执行一次参数:
            1.回调函数，该函数会每隔一段时间被调用一次
            2.每次调用间隔的时间，单位是毫秒

            clearInterval()可以用来关闭一个定时器方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器clearInterval(timer);
        */

        var num = 1;
        var timer = setInterval(() => {
            count.innerHTML = num++;
            if (num == 11) {
                clearInterval(timer);
            }
            
        }, 2000);
        
        };
    


</script>

setTimeout()延时调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>延时调用</title>
</head>
<body>
    <h1 id="count"></h1>
    
</body>
</html>
<script type="text/javaScript">
       /*
    延时调用，
    延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
    延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
    延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
    */
    window.onload = function(){
        var timer = setTimeout(
        function(){console.log(num++);}; 3000);
        //使用clearTimeout()来关闭一个延时调用
        clearTimeout(timer);
    
    }
 

</script>