定时器( setInterval和 setTimeout)

Posted 2020-11-02 澎湃_L

一、定时器setInterval-------常用的，反复循环的

   <input type="button" value="停止" id="btn">
    <script>
    //定时器setInterval(参数1,参数2)
    //参数1----->函数
    //参数2----->事件----单位毫秒-----1000毫秒=1秒
    //执行过程:页面加载完毕后,过了多少时间,执行一次函数的代码,然后又过了多少时间,又执行一次函数的代码..
    //返回值是定时器的id
    //清理定时器用clearInterval(id)
    var timeId=setInterval(function(){
    //设置了一个定时器,一秒控制台输出 "哈哈"
        console.log("哈哈");
    },1000)
    document.getElementById("btn").onclick=function(){
    //点击按钮,停止定时器,参数是要清理的定时器的id
        window.clearInterval(timeId);
    };
    </script>

二、定时器setTimeout-------一次性的

   <input type="button" value="停止" id="btn">
    <script>
        //定时器setTimeout(参数1,参数2)
        //参数1----->函数
        //参数2----->事件----单位毫秒-----1000毫秒=1秒
        //执行过程:页面加载完毕后,过了多少时间,执行一次函数的代码(只执行一次)
        //返回值是定时器的id
        //清理定时器用clearTimeout----虽然是一次性的定时器,但是也要清理,不然会一直占内存
        var timeId = setTimeout(function () {
            //设置了一个定时器,一秒控制台输出 "哈哈"
            console.log("哈哈");
        }, 1000)
        document.getElementById("btn").onclick = function () {
            //点击按钮,停止定时器,参数是要清理的定时器的id
            window.clearTimeout(timeId);
        };
    </script>

三、案例