计时器问题的区别和清除

最新推荐文章于 2024-01-25 16:31:54 发布

诗安

最新推荐文章于 2024-01-25 16:31:54 发布

阅读量1.1k

点赞数

文章标签： web前端计时器清除 setTimeout和setInterv

本文链接：https://blog.csdn.net/mengshanshan1/article/details/65436769

版权

在前端开发中用到计时器，往往会出现很多意想不到的错误，下面就从本质上区分和理解计时器。

首先来了解setTimeout和setInterval的区别

<!DOCTYPE html>
<html lang="en">
<head>
	<title>test</title>
</head>
<body>
<button οnclick="cba()">点击2</button>
<button οnclick="abc()">点击</button>
<script>
// 测试清除计时器
var i = 0,j=1000;
var time;var time2;
function abc(){
	i++;
	console.log(i);
}
function cba(){
	j--;
	console.log(j);
}
window.setInterval(cba,6000);//重复执行
window.setTimeout(abc,6000);//只执行1次
</script>
</body>
</html>

执行可以很清楚的看到它们的区别就不详细说了.

在使用计时器时，我们往往是放在一个方法或函数里，这时就会用到清除计时器的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<title>test</title>
</head>
<body>
<button οnclick="cba()">点击2</button>
<button οnclick="abc()">点击</button>
<script>
// 测试清除计时器
var i = 0,j=1000;
var time;var time2;
function abc(){
	i++;
	console.log(i);
	window.clearTimeout(time);
	time = window.setTimeout(abc,9000);
}
function cba(){
	j--;
	console.log(j);
	window.clearInterval(time2);
	time2 = window.setInterval(cba,9000);
}

</script>
</body>
</html>
这是我们要在每一次创建新计时器前清掉前面的，注意要把计时器设置为全局变量。

诗安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计时器问题的区别和清除

在前端开发中用到计时器，往往会出现很多意想不到的错误，下面就从本质上区分和理解计时器。首先来了解setTimeout和setInterval的区别 test点击2点击// 测试清除计时器var i = 0,j=1000;var time;var time2;function abc(){ i++; console.log(i);}function cba()
复制链接

扫一扫