JavaScript基础(16_定时器)
定时器
定时器
-
setInterval()
-
定时调用
-
可以将一个函数，每隔一段时间执行一次
-
参数：
-
回调函数，该函数每隔一段时间会被调用一次
-
每次调用间隔的时间，单位是毫秒
-
-
返回值：
-
返回一个Number类型的数据
-
这个数字用来作为定时器的唯一标识
-
-
定时调用
-
需求：使得#count中的内容，自动切换
-
代码实现<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ // 获取count var count = document.getElementById("count"); // 使得count中的内容，自动切换 var num = 1; var timer = setInterval(function(){ count.innerHTML = num++; if(num == 100000){ clearInterval(timer); } },10); console.log(timer); // clearInterval()可以用来关闭一个定时器 // 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器 // clearInterval(1); }; </script> </head> <body> <h1 id="count">1</h1> </body> </html>
延时器
-
延时调用
-
表示一个函数不马上执行，隔一段时间后 再执行并且只会执行一次
-
延时调用和定时调用的区别是
-
定时会执行多次
-
延时只会执行一次
-
-
延时调用和定时调用实际上是可以互相代替的，在开发中，可以根据自己的需要去选择
延时调用
-
需求：延时3秒后显示数字1
-
代码实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> var num = 1; // 延时调用 var timer = setTimeout(function(){ document.write(num++); },3000); // 关闭一个延时调用 // clearTimeout(timer); </script> </head> <body> </body> </html>
