20180904 定时器setTimeout和setInterval回调问题

引用:

setTimeout和setInterval两者的区别

setTimeout和setInterval的优缺点

setTimeout和setInterval详解

两者的作用都是在定时多少毫秒后回调(函数),不同在于

1. 执行次数,setTimeout在一个固定时间后回调一次函数。而setTimeout可以循环回调

  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的计时效果。

 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计时器写入到函数中,这时也能达到上述第二例的效果(此方法会导致函数运行的内存负担增加,不推荐)

<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>

今天就先写到这儿吧

猜你喜欢

转载自www.cnblogs.com/goakon/p/9587765.html
今日推荐