JavaScript节流函数

Eason_Lou

于 2021-10-13 08:54:13 发布

阅读量125

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_54366356/article/details/120736684

版权

JavaScript 节流定时器倒计时事件防抖

关键词由CSDN通过智能技术生成

前端专栏收录该内容

28 篇文章 3 订阅

订阅专栏

JavaScript节流函数演示，在设定时间内只能执行一次某个函数，防止短时间内多次频繁触发执行

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<style type="text/css">

	</style>
	<body>
		<h1>JavaScript节流函数</h1>
		<h3>5秒钟之内只执行一次方法</h3>
		<button id="btn" type="button" onclick="handleClick()">点击</button>
		<script type="text/javascript">
			function handleClick() {
				var btnElem = document.querySelector("#btn");
				btnElem.disabled = "disabled";
				var index = 4;
				var s = setInterval(() => {
					index--;
					btnElem.innerText = `倒计时${index}秒`;
					if (index < 0) {
						clearInterval(s);
						btnElem.innerText = '倒计时4秒';
						btnElem.disabled = "";
					}
				}, 1000)
				alert('hello world')
			};
		</script>
	</body>
</html>

demo效果图：

在这里插入图片描述

Eason_Lou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript节流函数

JavaScript节流函数演示，在设定时间内只能执行一次某个函数，防止短时间内多次频繁触发执行<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
复制链接

扫一扫

专栏目录