20180904 定时器setTimeout和setInterval回调问题
程序员文章站
2022-04-18 13:20:16
引用: setTimeout和setInterval两者的区别 setTimeout和setInterval的优缺点 setTimeout和setInterval详解 两者的作用都是在定时多少毫秒后回调（函数），不同在于 1. 执行次数，setTimeout在一个固定时间后回调一次函数。而setTi ......
引用:
两者的作用都是在定时多少毫秒后回调（函数），不同在于
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>
今天就先写到这儿吧