js中两种定时器的设置及清除
1.循环执行:
var timeid = window.setInterval(“方法名或方法”,“延时”);
window.clearInterval(timeid);
<script type="text/javascript"> $(document).ready(function(){ //循环执行,每隔1秒钟执行一次 1000 var t1=window.setInterval(refreshCount, 1000);
function refreshCount() { console.log("ready"); }
//去掉定时器的方法
window.clearInterval(t1);
});
</script>
setInterval有一个有名函数fn1,setInterval(fn1,500)与setInterval(fn1(),500)有什么区别?
第一个是重复执行每500毫秒执行一次,后面一个只执行一次。
2.定时执行:当方法执行完成定时器停止(但是定时器还在,只不过没用了);
var tmid = window.setTimeout(“方法名或方法”, “延时”);
window.clearTimeout(tmid);
<script type="text/javascript"> $(document).ready(function(){ //定时执行,5秒后执行 var t1=window.setTimeout(refreshCount, 1000 * 5); function refreshCount() { console.log("ready"); } //去掉定时器的方法 window.clearTimeout(t1); }); </script>
例题:
for(var i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10);}
答案:打印4次4
这道题涉及了异步、作用域、闭包
settimeout是异步执行,10ms后往任务队列里面添加一个任务,只有主线上的全部执行完,才会执行任务队列里的任务,当主线执行完成后,i是4,所以此时再去执行任务队列里的任务时,i全部是4了。对于打印4次是:
因为for循环头部的let不仅将i绑定到for循环快中,事实上它将其重新绑定到循环体的每一次迭代中,确保上一次迭代结束的值重新被赋值。setTimeout里面的function()属于一个新的域,通过 var 定义的变量是无法传入到这个函数执行域中的,通过使用 let 来声明块变量,这时候变量就能作用于这个块,所以 function就能使用 i 这个变量了;这个匿名函数的参数作用域 和 for参数的作用域 不一样,是利用了这一点来完成的。这个匿名函数的作用域有点类似类的属性,是可以被内层方法使用的。
查了一下百度的一个答案:
setTimeout是一次执行函数,这里是10ms后执行,仅仅执行一次;for(var i=0;i<=3;i++),i的每次取值都是执行setTimeout这个函数,并没有执行setTimeout里面的function(即闭包函数),setTimeout里面的function是有setTimeout的定时触动的,也就是10ms后执行,也就是说i从0~3时,一共执行了4次的setTimeout()函数,此时的i的值是4,由于for语句的执行速度远小于1秒,所以,1秒后,由setTimeout()函数定时触动的闭包函数function()开始执行,alert(i);i的值已经是4了,所以相继打印4次i.
实现60s倒计时效果,并在控制台输出。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./code/lib/jQuery/jQuery-1.8.3-min.js"></script> <script type="text/javascript"> var setTime; $(document).ready(function(){ var time=parseInt($("#time").text()); setTime=setInterval(function(){ if(time<=0){ clearInterval(setTime); return; } time--; $("#time").text(time); console.log(time); },1000); }); </script> </head> <body> <span id="time">60</span> </body> </html>