setTimeout 和 clearTimeout
setTimeout()
延时定时器,即多久时间之后去执行(一次性的)
语法:
主要包含两个参数,函数和单位为毫秒的数值。
// 一
setTimeout("function();",delaytime);
// 二
// 定义一个变量 (timerId) 用于保存 setTimeout() 这个定时器,以便使用 clearTimeout(timerId) 来取消。
let timerId;
timerId = setTimeout("function();",delaytime);
//----------------------------------
// 3秒后在console里打印一句1
function x(){
console.log(1);
}
setTimeout(x,3000);
// 上面代码等效下面的代码
setTimeout(function (){
// alert(1)
console.log(1);
},3000);
并且可以使用clearTimeout()
来取消执行setTimeout()
clearTimeout(timerId );
setInterval 和 clearInterval
setInterval
间隔定时器,每隔一段时间就执行一次(重复执行)
语法:
和setTimeout()
用法一样,区别仅在于一次性执行和重复执行,主要包含两个参数,函数和单位为毫秒的数值。
// 每个1秒打印会一个数,让i一直加1
setInterval(fn,1000)
var i = 0;
function fn(){
i++;
console.log(i)
}
使用clearInterval()
来取消执行setInterval()
demo
点击移动div
<body>
<button>停止</button>
<div class="box"></div>
<script>
let box = document.querySelector('.box');
let btn = document.querySelector('button');
let num = 0;
// 1.要结束一个定时器,就先声明一个变量(存定时器)
let timer = null;
box.onclick = function(){
// 3.当多次执行时,先把上一次开着的定时器关掉,再往下执行开新的
clearInterval(timer); //第一次执行时这还是个undefined,会自动忽略
// 2.然后把(开)定时器里的内容存起来
timer = setInterval(function(){
num+=3;
box.style.left = num+'px';
},30);
}
btn.onclick = function(){
clearInterval(timer);
}
</script>
</body>
定时器有多次执行或者使用setInterval()
时一定要先关再开!!!否则很容易出现一些不可预料的情况。