20180904 定时器setTimeout和setInterval回调问题

时间 2019-11-30

标签定时器 settimeout setinterval 问题繁體版

原文原文链接

引用:函数

setTimeout和setInterval二者的区别spa

setTimeout和setInterval的优缺点.net

setTimeout和setInterval详解code

二者的做用都是在定时多少毫秒后回调（函数），不一样在于blog

1. 执行次数，setTimeout在一个固定时间后回调一次函数。而setTimeout能够循环回调ip

　　e.g. 1) 定义变量初始值为0，当定时器Timer使用setTimeout回调时，此时变量结果为2（在页面调用一次函数后setTimeout回调一次函数）。内存

 1 <body onload="myFunction()">
 2     <p id="demo"></p>
 3     <script>
 4         var i = 0;
 5         function myFunction()
 6         {
 7             i++;
 8             document.getElementById("demo").innerHTML = i;
 9             
10         }
11         var timer = setTimeout(function(){myFunction()},500);
12         
13     </script>
14 </body>

　　e.g. 2) 一样定义变量初始值为0，当定时器Timer使用setInterval回调时，此时变量呈现每0.5秒加1的计时效果。get

 1 <body onload="myFunction()">
 2     <p id="demo"></p>
 3     <script>
 4         var i = 0;
 5         function myFunction()
 6         {
 7             i++;
 8             document.getElementById("demo").innerHTML = i;
 9             
10         }
11         var timer = setInterval(function(){myFunction()},500);
12         
13     </script>
14 </body>

　　e.g. 3) 若是把setTimeout计时器写入到函数中，这时也能达到上述第二例的效果（此方法会致使函数运行的内存负担增长，不推荐）io

<body onload="myFunction()">
    <p id="demo"></p>
    <script>
        var i = 0;
        function myFunction()
        {
            i++;
            document.getElementById("demo").innerHTML = i;
            var timer = setTimeout(function(){myFunction()},500);
        }
    </script>
</body>

今天就先写到这儿吧function