setTimeout() 与 setInterval() 的区别及使用

已于 2022-07-08 02:06:05 修改
阅读量5.1k 收藏 61
点赞数 8
分类专栏： JavaScript 简单的动画特效 文章标签： javascript 前端 开发语言
于 2020-06-14 01:41:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/106740942
版权

文章目录

区别

1.同代码对比

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		//变量初始化
		var num1 = 0;
		var num2 = 0;
		var clock1;
		var clock2;

		//定义启动器
		function work(ele) {
			if (ele.id === 'box1') {
				ele.style.width = num1 + 'px';
				if (ele.getAttribute('data-toggle') === 'off') {		//相等判断则为真，严格相等则为假，除非加双引号
					num1 += 1;
					if (num1 === 200) {
						ele.setAttribute('data-toggle', 'on');
					}
				} else if (ele.getAttribute('data-toggle') == 'on') {
					num1 -= 1;
					if (num1 === 0) {
						ele.setAttribute('data-toggle', 'off');
					}
				}
			} else {
				ele.style.width = num2 + 'px';
				if (ele.getAttribute('data-toggle') == 'off') {		//相等判断则为真，严格相等则为假，除非加双引号
					num2 += 1;
					if (num2 === 200) {
						ele.setAttribute('data-toggle', 'on');
					}
				} else if (ele.getAttribute('data-toggle') == 'on') {
					num2 -= 1;
					if (num2 === 0) {
						ele.setAttribute('data-toggle', 'off');
					}
				}
			}
		}

		//定义暂停器
		function rest() {
			if (this.id === 'stop1') {
				clearTimeout(clock1);
			} else {
				clearInterval(clock2);
			}
		}

		window.onload = function() {
			//第一个盒子
			var box1 = document.getElementById('box1');
			document.getElementById('start1').onclick = function() {
				clock1 = setTimeout(function() {
					work(box1);
				}, 10);
			}
			document.getElementById('stop1').onclick = rest;

			//第二个盒子
			var box2 = document.getElementById('box2');
			document.getElementById('start2').onclick = function() {
				clock2 = setInterval(function() {
					work(box2);
				}, 10);
			}
			document.getElementById('stop2').onclick = rest;
		}
	</script>
</head>
<body>
	<h3>setTimeout() 与 setInterval() 的区别</h3>
	<input type="button" id="start1" value="setTimeout" />
	<input type="button" id="stop1" value="clearTimeout" />
	<div id="box1" style="width: 0;height: 50px;background: red" data-toggle="off"></div>
	<input type="button" id="start2" value="setInterval" />
	<input type="button" id="stop2" value="clearInterval" />
	<div id="box2" style="width: 0;height: 50px;background: green" data-toggle="off"></div>
</body>
</html>

在这里插入图片描述

小结：
1.相同条件下，setTimeout() 只执行一次，setInterval() 则循环执行；
2.setTimeout() 延迟执行一次： setTimeout(fn, 1000); //延迟1秒，执行一次fn()；
3.setInterval() 隔段时间循环执行； setInterval(fn, 1000); //每隔1秒，循环执行fn()

2.setTimeout() 模拟 setInterval() 【缺陷】（已修复：2020/09/07，知识点：防抖）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		//变量初始化
		var num1 = 0;
		var num2 = 0;
		var clock1;
		var clock2;

		//定义启动器
		function work(ele) {
			if (ele.id === 'box1') {
				ele.style.width = num1 + 'px';
				if (ele.getAttribute('data-toggle') === 'off') {		//相等判断则为真，严格相等则为假，除非加双引号
					num1 += 1;
					if (num1 === 200) {
						ele.setAttribute('data-toggle', 'on');
					}
				} else if (ele.getAttribute('data-toggle') == 'on') {
					num1 -= 1;
					if (num1 === 0) {
						ele.setAttribute('data-toggle', 'off');
					}
				}
				clock1 = setTimeout(function() {
					work(ele);
				}, 10);
			} else {
				ele.style.width = num2 + 'px';
				if (ele.getAttribute('data-toggle') == 'off') {		//相等判断则为真，严格相等则为假，除非加双引号
					num2 += 1;
					if (num2 === 200) {
						ele.setAttribute('data-toggle', 'on');
					}
				} else if (ele.getAttribute('data-toggle') == 'on') {
					num2 -= 1;
					if (num2 === 0) {
						ele.setAttribute('data-toggle', 'off');
					}
				}
			}
		}

		//定义暂停器
		function rest() {
			if (this.id === 'stop1') {
				clearTimeout(clock1);
			} else {
				clearInterval(clock2);
			}
		}

		window.onload = function() {
			//第一个盒子
			var box1 = document.getElementById('box1');
			document.getElementById('start1').onclick = function() {

				// 可查阅关键字【防抖】的文章
				// clearTimeout(clock1);	// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  经过提醒，可以在此处清除计时器，来阻止叠加执行
				work(box1);
			};
			document.getElementById('stop1').onclick = rest;

			//第二个盒子
			var box2 = document.getElementById('box2');
			document.getElementById('start2').onclick = function() {

				// 可查阅关键字【防抖】的文章
				// clearInterval(clock2);	// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  经过提醒，可以在此处清除计时器，来阻止叠加执行
				clock2 = setInterval(function() {
					work(box2);
				}, 10);
			}
			document.getElementById('stop2').onclick = rest;
		}
	</script>
</head>
<body>
	<h3>setTimeout() 与 setInterval() 的区别</h3>
	<input type="button" id="start1" value="setTimeout" />
	<input type="button" id="stop1" value="clearTimeout" />
	<div id="box1" style="width: 0;height: 50px;background: red" data-toggle="off"></div>
	<input type="button" id="start2" value="setInterval" />
	<input type="button" id="stop2" value="clearInterval" />
	<div id="box2" style="width: 0;height: 50px;background: green" data-toggle="off"></div>
</body>
</html>

在这里插入图片描述

注意：反复点击按钮，计时器会被叠加执行，使得数值抽搐跳动（下面有介绍如何解决）

在这里插入图片描述
只有 setTimeout() 会被 clearTimeout() 或 clearInterval() 依次停止，而 setInterval() 则无法被停止。

3.setTimeout() + for

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		//定义宽递增动画
		function addWidth(ele) {
			for (var i = parseInt(ele.style.width); i <= 200; i++) {
				(function(i) {
					setTimeout(function() {
						ele.style.width = i + 'px';
						// console.log(i);
						if (i === 200) {
							ele.removeAttribute('data-disabled');
							ele.removeAttribute('data-toggle');
						}
					}, i*10);
				})(i);
			}
		}

		//定义宽递减动画
		function redWidth(ele) {
			var j = 0;
			for (var i = parseInt(ele.style.width); i >= 0; i--) {
				(function(i) {
					setTimeout(function() {
						ele.style.width = i + 'px';
						// console.log(i);
						if (i === 0) {
							ele.removeAttribute('data-disabled');
							ele.removeAttribute('data-toggle');
						}
					}, j*10);
				})(i);
				j++;
			}
		}

		// 创建启动器
		function work(ele) {
			// 当宽为0时, 递增开关值为'up'
			if (parseInt(ele.style.width) === 0) {
				ele.setAttribute('data-toggle', 'up');

			// 当宽为200时, 递减开关值为'down'
			} else if (parseInt(ele.style.width) === 200) {
				ele.setAttribute('data-toggle', 'down');
			}

			//未被禁止时执行
			if (ele.getAttribute('data-disabled') === null) {
				// 开关为'up'时
				if (ele.getAttribute('data-toggle') === 'up') {
					addWidth(ele);

				// 开关为'down'时
				} else {
					redWidth(ele);
				}
			}

			// 点击启动按钮后，设置'data-disabled', 避免重复点击导致计时器叠加执行
			ele.setAttribute('data-disabled', true);
		}

		window.onload = function() {
			var box = document.getElementById('box');
			document.getElementById('start').onclick = function() {
				work(box);
			}
		}
	</script>
</head>
<body>
	<input type="button" id="start" value="work" />
	<div id="box" style="width: 0;height: 50px;background: pink"></div>
</body>
</html>

又或者

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		// 定义宽递增动画
		function addWidth(i,ele) {
			setTimeout(function() {
				ele.style.width = i + 'px';
				// console.log('up: ' + i);
			}, i*10);
		}

		// 定义宽递减动画
		function redWidth(i,j,ele) {
			setTimeout(function() {
				ele.style.width = i + 'px';
				// console.log('down: ' + i);
			}, j*10);
		}

		// 定义启动器
		function work(ele) {
			// i: 当前宽值
			var i = parseInt(ele.style.width);
			// j: 递减时控制时间, 因为数值递减，执行时间递增
			var j = 0;
			if (parseInt(ele.style.width) === 0) {
				for (i; i <= 200; i++) {
					addWidth(i,ele);
				}
			} else if (parseInt(ele.style.width) === 200) {
				for (i; i >= 0; i--) {
					redWidth(i,j,ele);
					j += 1;
				}
			}
		}

		window.onload = function() {
			var box = document.getElementById('box');
			document.getElementById('start').onclick = function() {
				work(box)
			}
		}
	</script>
</head>
<body>
	<h3>通过for循环控制setTimeout()</h3>
	<input type="button" id="start" value="start" />
	<div id="box" style="width: 0;height: 50px;background: pink"></div>
</body>
</html>

在这里插入图片描述

解决与演示

通过改良上例代码，实现以下功能：

  1. 通过点击按钮控制宽值递增或递减；
  2. 当宽值达到最小值 0px 或最大值 200px 时，函数自动结束（含停止递增或递减）；
  3. 按钮控制，宽值递增达到 200px 时，切换为递减；宽值递减达到 0px 时，切换递增；可周而复始执行；
  4. 反复执行按钮不会造成函数重复执行，导致宽值来回抽搐跳动；
  5. 可通过暂停按钮来中断宽值递增或递减；

setInterval() 写法

code（因为最先写的，所以冗余过多，还未压缩删减）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
	/*
		Tips:
			1.	addWidth() 表示宽值递增时执行的函数;
				addWidth() 表示宽值递增时执行的函数;

			2.	'ele' 表示被传入的DOM节点, 而所有函数的 'ele' 均继承 'work()' 如：work(box);

			3.	'timer1' 是 addWidth() 使用的计时器;
				'timer2' 是 redWidth() 使用的计时器;

			4.	data-disabled="true" 避免重复点击导致计时器叠加执行, 点击启动时设置，点击暂停时移除;

			5.	data-toggle="up" / data-toggle="down" 分别表示未被终止过的递增和递减开关;
				data-toggle="add" / data-toggle="red" 分别表示被终止过的递增和递减开关;

			6.	setInterval(fn, 10), 每隔10毫秒(0.01)秒执行;

			7.	var i;	表示从 0 或 200 开始计数;
				var j;	表示从 当前宽+1 或 当前宽-1 开始计数;

			8.	'j = parseInt(ele.style.width) + 1' 表示被终止过的递增, 获取当前宽值, 并从下一个数开始执行;
				'j = parseInt(ele.style.width) - 1' 表示被终止过的递减, 获取当前宽值, 并从下一个数开始执行;
				+1 / -1, 避免重复执行当前值;

			9. 结束 setInterval / setTimeout , 要用 clearTimeout / clearInterval, return 无效;

			10.	如有错误, 欢迎留言指正;


		测试序号 A1/B1: 用于打印数值, 检测 i 和 j 值是否连续;
		测试序号 A2/B2: 用于测试反复点击按钮, 是否出现重值现象, 是否出现跳值现象;
		测试序号 A3/B3: 事实证明, return 对于计数器无效, 只能用 clearInterval 结束, 这里把我坑惨了;
	 */
	

		// 定义计时器名
		var timer1;
		var timer2;

		// 宽递增
		function addWidth(ele) {
			// i 值：data-toggle="up" 时使用, 从 0 开始计数
			var i = 0;
			// j 值：data-toggle="add" 时使用, 从 (当前宽+1) 开始计数
			var j = parseInt(ele.style.width) + 1;

			// 当宽为0时执行
			if (parseInt(ele.style.width) === 0) {

				// 执行 timer1 计时器
				timer1 = setInterval(function() {

					// i 小于200时, 递增
					if (i < 200) {
						
						i += 1;
						ele.style.width = i + 'px';						
						// console.log('up_i: ' + i);	// 打印 i 值 >>>>>> 测试序号 A1

					// i 值等于200时, 解除禁止并结束当前计时
					} else {
						ele.removeAttribute('data-disabled');

						// console.log('end_i: ' + i);	// 检查结束后, 该值是否继续打印 >>>>>> 测试序号 A3
						// return;	// 这是错误的 >>>>>> 测试序号 A3
						
						clearInterval(timer1);	// 注释该条再测试 >>>>>> 测试序号 A3
					}

					// console.log('请反复点击按钮(up):' + i);	// 检测是否叠加执行 >>>>>> 测试序号 A2
				}, 15);

			// 当被终止过递增, 且无'data-disabled'时执行
			} else if (ele.getAttribute('data-toggle') === 'add' && ele.getAttribute('data-disabled') === null) {

				// 执行 timer1 计时器
				timer1 = setInterval(function() {

					// j 小于200时, 递增
					if (j < 200) {

						j += 1;
						ele.style.width = j + 'px';						
						// console.log('add_j: ' + j);	// 打印 j 值 >>>>>> 测试序号 A1						

					// j 值等于200时, 解除禁止并结束当前计时
					} else {
						ele.removeAttribute('data-disabled');

						// console.log('end_j: ' + j);	// 检查结束后, 该值是否继续打印 >>>>>> 测试序号 A3
						// return;	// 这是错误的 >>>>>> 测试序号 A3

						clearInterval(timer1);	// 注释该条再测试 >>>>>> 测试序号 A3
					}

					// console.log('请反复点击按钮(add):' + j);	// 检测是否叠加执行 >>>>>> 测试序号 A2
				}, 15);
			}
		}

		// 宽递减
		function redWidth(ele) {
			// i值：data-toggle="down" 时使用, 从 0 开始计数
			var i = 200;
			// j值：data-toggle="red" 时使用, 从 (当前宽-1) 开始计数
			var j = parseInt(ele.style.width) - 1;

			// 当宽为200时执行
			if (parseInt(ele.style.width) === 200) {

				// 执行 timer2 计时器
				timer2 = setInterval(function() {

					// i 大于0时, 递减
					if (i > 0) {

						i -= 1;
						ele.style.width = i + 'px';
						// console.log('down_i: ' + i);	// 打印 i 值 >>>>>> 测试序号 B1						

					// i 值等于0时, 解除禁止并结束当前计时
					} else {
						ele.removeAttribute('data-disabled');

						// console.log('end_i: ' + i);	// 检查结束后, 该值是否继续打印 >>>>>> 测试序号 B3
						// return;	// 这是错误的 >>>>>> 测试序号 B3
						
						clearInterval(timer2);	// 注释该条再测试 >>>>>> 测试序号 B3
					}

					// console.log('请反复点击按钮(down):' + i);	// 检测是否叠加执行 >>>>>> 测试序号 B2
				}, 15);

			// 当被终止过递减, 且无'data-disabled'时执行
			} else if (ele.getAttribute('data-toggle') == 'red' && ele.getAttribute('data-disabled') === null) {

				// 执行 timer2 计时器
				timer2 = setInterval(function() {

					// j 大于0时, 递减
					if (j > 0) {

						j -= 1;
						ele.style.width = j + 'px';
						// console.log('red_j: ' + j);	// 打印 j 值 >>>>>> 测试序号 B1
						
					// j 值等于0时, 解除禁止并结束当前计时
					} else {
						ele.removeAttribute('data-disabled');

						// console.log('end_j: ' + j);	// 检查结束后, 该值是否继续打印 >>>>>> 测试序号 B3
						// return;	// 这是错误的 >>>>>> 测试序号 B3

						clearInterval(timer2);	// 注释该条再测试 >>>>>> 测试序号 B3
					}

					// console.log('请反复点击按钮(red):' + j);	// 检测是否叠加执行 >>>>>> 测试序号 B2
				}, 15);
			}
		}

		// 创建启动器
		function work(ele) {
			// 当宽为0时, 默认递增开关值为'up'
			if (parseInt(ele.style.width) === 0) {
				ele.setAttribute('data-toggle', 'up');

			// 当宽为200时, 默认递减开关值为'down'
			} else if (parseInt(ele.style.width) === 200) {
				ele.setAttribute('data-toggle', 'down');
			}

			// 当开关为up/add时执行, up表示默认, add表示被终止过
			if (ele.getAttribute('data-toggle') === 'up' || ele.getAttribute('data-toggle') === 'add') {
				addWidth(ele);

			// 当开关为down/red时执行, down表示默认, red表示被终止过
			} else if (ele.getAttribute('data-toggle') === 'down' || ele.getAttribute('data-toggle') === 'red') {
				redWidth(ele);
			}

			// 点击启动按钮后，设置'data-disabled', 避免重复点击导致计时器叠加执行
			ele.setAttribute('data-disabled', true);
		}

		// 创建暂停器
		function rest(ele) {
			// 当递增时执行
			if (ele.getAttribute('data-toggle') == 'up' || ele.getAttribute('data-toggle') == 'add'){
				// 停止计时
				clearInterval(timer1);
				// 切换递增名, add表示被终止过
				ele.setAttribute('data-toggle', 'add');

			// 当递减时执行
			} else if (ele.getAttribute('data-toggle') == 'down' || ele.getAttribute('data-toggle') == 'red') {
				// 停止计时
				clearInterval(timer2);
				// 切换递增名, red表示被终止过
				ele.setAttribute('data-toggle', 'red');
			}

			// 点击暂停按钮后，移除'data-disabled', 使启动按钮可点击并执行
			ele.removeAttribute('data-disabled');
		}

		window.onload = function() {
			var box = document.getElementById('box');
			document.getElementById('start').onclick = function() {
				work(box);
			}
			document.getElementById('stop').onclick = function() {
				rest(box);
			};
		}
	</script>
</head>
<body>
	<input type="button" id="start" value="work" />
	<input type="button" id="stop" value="rest" />
	<div id="box" style="width: 0;height: 50px;background: green"></div>
</body>
</html>

demo（未改良）
在这里插入图片描述
code（已改良）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
	/*
		Tips:
			1.	addWidth() 表示宽值递增时执行的函数;
				addWidth() 表示宽值递增时执行的函数;

			2.	'ele' 表示被传入的DOM节点, 而所有函数的 'ele' 均继承 'work()' 如：work(box);

			3.	'timer1' 是 addWidth() 使用的计时器;
				'timer2' 是 redWidth() 使用的计时器;

			4.	data-disabled="true" 避免重复点击导致计时器叠加执行, 点击启动时设置，点击暂停时移除;

			5.	data-toggle="up" / data-toggle="down" 分别递增和递减开关;

			6.	setInterval(fn, 15), 每隔15毫秒(0.015)秒执行;

			7.	i值: 当前宽值;

			8. 结束 setInterval / setTimeout , 要用 clearTimeout / clearInterval, return 无效;

			9.	如有错误, 欢迎留言指正;


		测试序号 A1/B1: 用于打印数值, 检测 i 是否连续;
		测试序号 A2/B2: 用于测试反复点击按钮, 是否出现重值现象, 是否出现跳值现象;
		测试序号 A3/B3: 事实证明, return 对于计数器无效, 只能用 clearInterval 结束, 这里把我坑惨了;
	 */
	

		// 定义计时器名
		var timer1;
		var timer2;

		// 宽递增
		function addWidth(ele) {
			// i值: 当前宽值
			var i = parseInt(ele.style.width);

			// 执行 timer1 计时器
			timer1 = setInterval(function() {

				// i 小于等于200时, 递增
				if (i < 200) {
					i += 1;
					ele.style.width = i + 'px';
					console.log('up_i: ' + i);	// 打印 i 值 >>>>>> 测试序号 A1

				// i 值等于200时, 解除禁止并结束当前计时
				} else {
					ele.removeAttribute('data-disabled');
					ele.removeAttribute('data-toggle');

					// console.log('end_i: ' + i);	// 检查结束后, 该值是否继续打印 >>>>>> 测试序号 A3
					// return;	// 这是错误的 >>>>>> 测试序号 A3
							
					clearInterval(timer1);	// 注释该条再测试 >>>>>> 测试序号 A3
				}

				// console.log('请反复点击按钮(up):' + i);	// 检测是否叠加执行 >>>>>> 测试序号 A2
			}, 15);
		}

		// 宽递减
		function redWidth(ele) {
			// i值: 当前宽值
			var i = parseInt(ele.style.width);

			// 执行 timer2 计时器
			timer2 = setInterval(function() {

				// i 大于等于0时, 递减
				if (i > 0) {
					i -= 1;
					ele.style.width = i + 'px';
					console.log('down_i: ' + i);	// 打印 i 值 >>>>>> 测试序号 B1

				// i 值等于0时, 解除禁止并结束当前计时
				} else {
					ele.removeAttribute('data-disabled');
					ele.removeAttribute('data-toggle');

					// console.log('end_i: ' + i);	// 检查结束后, 该值是否继续打印 >>>>>> 测试序号 B3
					// return;	// 这是错误的 >>>>>> 测试序号 B3
							
					clearInterval(timer2);	// 注释该条再测试 >>>>>> 测试序号 B3
				}

				// console.log('请反复点击按钮(down):' + i);	// 检测是否叠加执行 >>>>>> 测试序号 B2
			}, 15);			
		}

		// 创建启动器
		function work(ele) {
			// 当宽为0时, 递增开关值为'up'
			if (parseInt(ele.style.width) === 0) {
				ele.setAttribute('data-toggle', 'up');

			// 当宽为200时, 递减开关值为'down'
			} else if (parseInt(ele.style.width) === 200) {
				ele.setAttribute('data-toggle', 'down');
			}

			//未被禁止时执行
			if (ele.getAttribute('data-disabled') === null) {
				// 开关为'up'时
				if (ele.getAttribute('data-toggle') === 'up') {
					addWidth(ele);

				// 开关为'down'时
				} else {
					redWidth(ele);
				}
			}

			// 点击启动按钮后，设置'data-disabled', 避免重复点击导致计时器叠加执行
			ele.setAttribute('data-disabled', true);
		}

		// 创建暂停器
		function rest(ele) {
			// 当递增时执行
			if (ele.getAttribute('data-toggle') == 'up'){
				// 停止计时
				clearInterval(timer1);

			// 当递减时执行
			} else if (ele.getAttribute('data-toggle') == 'down') {
				// 停止计时
				clearInterval(timer2);
			}

			// 点击暂停按钮后，移除'data-disabled', 使启动按钮可点击并执行
			ele.removeAttribute('data-disabled');
		}

		window.onload = function() {
			var box = document.getElementById('box');
			document.getElementById('start').onclick = function() {
				work(box);
			}
			document.getElementById('stop').onclick = function() {
				rest(box);
			};
		}
	</script>
</head>
<body>
	<input type="button" id="start" value="work" />
	<input type="button" id="stop" value="rest" />
	<div id="box" style="width: 0;height: 50px;background: green"></div>
</body>
</html>

demo（已改良）
在这里插入图片描述

setTimeout() 写法（更简单）

code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		var timer1;
		var timer2;

		//定义宽递增动画
		function addWidth(ele) {
			var i =  parseInt(ele.style.width);
			if (i < 200) {
				i += 1;
				ele.style.width = i + 'px';
				// console.log(i);
				timer1 = setTimeout(function() {
					addWidth(ele);
				}, 15);
			} else {
				ele.removeAttribute('data-disabled');
				ele.removeAttribute('data-toggle');
			}
		}

		//定义宽递减动画
		function redWidth(ele) {
			var i =  parseInt(ele.style.width);
			if (i > 0) {
				i -= 1;
				ele.style.width = i + 'px';
				// console.log(i);
				timer2 = setTimeout(function() {
					redWidth(ele);
				}, 15);
			} else {
				ele.removeAttribute('data-disabled');
				ele.removeAttribute('data-toggle');
			}
		}

		// 创建启动器
		function work(ele) {
			// 当宽为0时, 递增开关值为'up'
			if (parseInt(ele.style.width) === 0) {
				ele.setAttribute('data-toggle', 'up');

			// 当宽为200时, 递减开关值为'down'
			} else if (parseInt(ele.style.width) === 200) {
				ele.setAttribute('data-toggle', 'down');
			}

			//未被禁止时执行
			if (ele.getAttribute('data-disabled') === null) {
				// 开关为'up'时
				if (ele.getAttribute('data-toggle') === 'up') {
					addWidth(ele);

				// 开关为'down'时
				} else {
					redWidth(ele);
				}
			}

			// 点击启动按钮后，设置'data-disabled', 避免重复点击导致计时器叠加执行
			ele.setAttribute('data-disabled', true);
		}

		// 创建暂停器
		function rest(ele) {
			// 当递增时执行
			if (ele.getAttribute('data-toggle') == 'up'){
				// 停止计时
				clearInterval(timer1);

			// 当递减时执行
			} else if (ele.getAttribute('data-toggle') == 'down') {
				// 停止计时
				clearInterval(timer2);
			}

			// 点击暂停按钮后，移除'data-disabled', 使启动按钮可点击并执行
			ele.removeAttribute('data-disabled');
		}

		window.onload = function() {
			var box = document.getElementById('box');
			document.getElementById('start').onclick = function() {
				work(box);
			}
			document.getElementById('stop').onclick = function() {
				rest(box);
			};
		}
	</script>
</head>
<body>
	<input type="button" id="start" value="work" />
	<input type="button" id="stop" value="rest" />
	<div id="box" style="width: 0;height: 50px;background: red"></div>
</body>
</html>

demo
在这里插入图片描述

setTimeout() + for

关于此方法，尝试多次后发现，暂停过再重新执行，数值不连续，来回跳动，计时器叠加执行，还未能找到解决方法。真是百思不得其解。
因为，for遍历的值是同一时间打印出来的，而无法依次被 setTimeout 执行；还有循环过后的变量会影响第二次点击的值，所以造成数值不连续执行。

iuukai
关注
  • 8
    点赞
  • 踩
  • 61
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
setInterval() 定时器 —— 发送短信验证码倒计时
赚钱养自个儿的博客
05-01 529
    学习来源：https://www.bilibili.com/video/BV1HJ41147DG   要求  点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。 思路  1、按钮点击之后，使用禁用 disabled = true;  2、同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML 修改  3、里面秒数是有变化的，因此需要用到定时器 &am...
setTimeout与setInterval的区别浅析
10-17
如果你需要反复执行某个函数，你需要使用 `setInterval` 或者在 `setTimeout` 的回调函数中再次调用 `setTimeout`。 与之相反，`setInterval` 用于周期性地执行某函数，直到被明确地停止。它的基本语法同样是 `...
setInterval和setTimeout详解
天天学安全专属博客
07-31 1870
JS(setinterval和settimeout)
setTimeout()与setInterval()的区别
li1051169049的博客
02-21 634
setTimeout()与setInterval()的区别
setTimeout与setInterval区别
uaena的博客
11-10 2763
1. setTimeout()只执行一次 定时程序，不会反复执行，只执行一次 a、setTimeout 定时调用，只弹出一次。 应用场景: 窗口弹出广告。用于延迟执行某方法或功能。 2. setInterval()可以执行多次 表示间隔一定时间反复执行 a、setInterval 反复不断的在间隔时间内容调用。应用场景: 图片轮播 图片切换。一般用于刷新表单，对于一些表单的假实时指定时间刷新同步。 b、在载入后，每隔指定的时间就执行一次表达式 分割线———————————— 相
自动递减或递增的JS变化
爱生活
08-17 2407
dayMSEL=1000*60*60*24一天的毫秒数hourMSEL=1000*60*60一小时的毫秒数MinuteMSEL=1000*60一分钟毫秒数eightHourMSEL=1000*60*60*8格林威治标准时间（GMT）比北京时间晚8个小时,所以减去8个小时的毫秒BeginDayNum=datediff("d","1970-1-1",rs("aucAvailDate"))该时
JavaScript中从setTimeout与setInterval到AJAX异步
10-20
主要介绍了JavaScript中从setTimeout与setInterval到AJAX异步,非常不错，具有参考借鉴价值，需要的朋友可以参考下
JavaScript SetInterval与setTimeout使用方法详解
12-02
不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。区别：window.setTimeout(“function”,time)；//设置一个...
理解javascript定时器中的setTimeout与setInterval
10-22
与`setTimeout`一样，`setInterval`在标准浏览器和IE10以上版本也支持传递额外参数。 然而，`setTimeout`和`setInterval`在处理`this`关键字时有一个常见问题。由于它们执行的代码是在全局作用域中，因此`this`通常...
用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别？
前端小工
07-08 1万+
对于setTimeout()跟setIntervl()之间的区别，你真的了解么？有时候看似简单的东西，往往隐藏一些你不知道的细节。setTimeout(fn,time)是超时调用，它在大于等于time之后调用fn；而setIntervl(fn,time)是间歇调用；每隔time调用一次。下面我要讲的是：用setTimeout()方法来模拟setInterval()与setInterval()之间的什
setInterval(fn,delay)的工作原理以及小特点
wzch333的博客
10-18 2732
一.浏览器执行事件特点 1.Js引擎只有一个线程,迫使异步事件只能加入到队列去等待执行. 2.在异步执行时,setTimeout与setInterval有着本质上的区别. 3.如果定时器被正在执行的代码阻塞了,它将会进入队列的尾部去等待执行下一次可能执行的时间出现,有可能超过它设定的延迟时间. 4.如果setInterval类的间隔定时器回调函数执行时间很长,长于时间间隔,定时器就有可能无
setTimeout和setInterval的区别
weixin_34060741的博客
09-05 72
setTimeout和setInterval的区别 javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中。 setTimeout 定时；仅执行一次;和window.clearTimeout一起使用. 格式： setTimeout(...
PHP setInterval与setTimeout的区别
xuander666的博客
09-10 581
一.setInterval与setTimeout的区别 setInterval()方法可按照指定的周期来调用函数或者计算表达式（以毫秒为单位） 语法： setInterval(函数表达式，毫秒数)； setInterval()会不停的调用函数，直到clearInterval()被调用或者窗口被关闭，由 setInterval()返回的ID值可用作clearInterval()方法的参数。 setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式（以毫秒为单位） 语法： setTimeou
js中的setTimeout和setInterval到底有啥区别？
热门推荐
diligence-zpf
07-20 2万+
最近在写小程序和蓝牙交互时，由于数据包可能会受到干扰,用到重发机制,所以需要js中的延时方法。我们知道js中的延时加载有两个方法分别是setTimeout和setInterval,这两个方法有啥差别呢？ 1. setTimeout的使用方法 setTimeout allows to run a function once after the interval of time. 在延时后的只执...
setTimeout()和setInterval() 何时被调用执行
weixin_33743248的博客
04-05 292
定义 setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。 从定义上我们可以看到两个函数十分类似，只不过前者执行一次，而后者可以执行多次，两个函数的参数也相同，第一个参数是要执行的...
settimeout与setinterval区别
最新发布
04-15
settimeout和setinterval都是JavaScript中的定时器函数，用于延时执行代码。它们的区别在于： ...因此，在需要非常精确的定时器时，应该使用settimeout而不是setinterval。 希望能够回答您的问题！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值