一、计时器方法概述
计时器方法可以实现在指定的时间过后,单次或重复调用函数的功能,setTimeout可以实现函数在指定毫秒数后单次执行,setInterval可以实现函数在指定毫秒数后重复执行,语法如下所示:
setTimeout(function(){
//一秒后执行
},1000);
setInterval(function(){
//一秒后执行,并且每隔一秒重复执行
},1000)
二、setTimeout
下面我们来实现一个效果,页面加载3秒后在控制台输出hello world
setTimeout(function(){
console.log("hello world");
},3000)
当计时器开始计时后,我们可以使用clearTimeout方法让计时器停下来,下面我们来定义一个按钮,当页面加载后,如果我们在3秒钟之内点击按钮,计时器会停止,不会输出hello world,如果不点击按钮,3秒钟之后就会输出hello world
var btn = document.querySelector("button");
var t = setTimeout(function(){
console.log("hello world");
},3000)
btn.onclick = function(){
clearTimeout(t);
}
setTimeout方法会返回一个整数类型的值,通过这个值,我们可以停止计时器,我们将setTimeout方法的返回值赋值给一个变量,当点击按钮的时候,使用clearTimeout方法,传入t,这样计时器就会停止,hello world就不会在控制台输出。
三、setInterval
setInterval的用法与setTimeout的用法非常类似,都是传入两个参数,第一个参数是计时器执行的函数,第二个参数是毫秒数。下面我们来实现一个效果,每3秒钟在控制台输出依次hello world
setInterval(function(){
console.log("hello world");
},3000)
从代码可以看出,setInterval与setTimeout完全相同,区别在于setInterval参数中的函数没个指定毫秒数后都会重复执行,当我们不希望计时器重复执行的时候,就可以使用clearInterval方法来停止计时器
var btn = document.querySelector("button");
var t = setInterval(function(){
console.log("hello world");
},3000)
btn.onclick = function(){
clearInterval(t);
}
下面我们来实现一个效果,让控制台输出每隔1秒按顺序输出正整数,从数字1开始输出
var n = 1;
function showNumber(){
co