js计时器⽅法
计时器⽅法:
⼀、计时器⽅法概述
计时器⽅法可以实现在指定的时间过后，单次或重复调⽤函数的功能，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)
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)
clearInterval(t);
}
下⾯我们来实现⼀个效果：
让控制台输出每隔1秒按顺序输出正整数，从数字1开始输出
var n = 1;
function showNumber(){
console.log(n);
n++;
}
setInterval(showNumber,1000);
showNumber();    //调⽤函数，可以在页⾯加载时直接输出1。
我们可以⽤计时器⽅法来实现这个功能 ，指定秒数跳转到其他⽹页:
<p><span class="seconds">3</span>秒后跳转到百度</p>
<script>
var seconds = document.querySelector(".seconds");
setInterval(function(){
var time = Number(seconds.innerHTML);
js方法
time--;
seconds.innerHTML = time;
if(time === 0){
location.href = "baidu";  //location.href可以实现页⾯跳转          }
},1000)
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。