JS函数节流

最新推荐文章于 2024-04-03 13:08:44 发布

huyao_road

最新推荐文章于 2024-04-03 13:08:44 发布

阅读量154

点赞数

分类专栏： JS小技巧

本文链接：https://blog.csdn.net/qq_37746973/article/details/80571599

版权

JS小技巧专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在前端开发中有一部分用户的行为会频繁的触发时间执行，而对于dom操作、资源加载等耗费性能的处理，很有可能导致界面卡顿，甚至浏览器的崩溃。

函数节流就是预定一个函数只有在大于执行周期时才执行，周期内调用不执行。好像水滴积攒到一定程度才会触发一次下落一样。

应用场景;

抢购疯狂点击
窗口调整
页面滚动

实现代码：

/**
 * 节流, 让每隔wait毫秒才执行一次handler函数
 */
function throttle(handler, wait){
	wait = wait || 1000;	//不传默认是一秒钟
	var lastTime = 0;
	return function(){
		var nowTime = new Date().getTime();
		if(nowTime - lastTime > wait){
			handler();
			lastTime = nowTime;
		}
	}
}

测试用例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>
</head>
<body>
<div id="show">0</div>
<button id="btn">
	click
</button>

<script type="text/javascript">
/**
 * 节流, 让每隔wait毫秒才执行一次handler函数
 */
function throttle(handler, wait){
	wait = wait || 1000;	//不传默认是一秒钟
	var lastTime = 0;
	return function(){
		var nowTime = new Date().getTime();
		if(nowTime - lastTime > wait){
			handler();
			lastTime = nowTime;
		}
	}
}

var oDiv = document.getElementById('show')
var oBtn = document.getElementById('btn');

function add() {
	oDiv.innerText = parseInt(oDiv.innerText) + 1;
}
// var newAdd = throttle(add)
oBtn.onclick = throttle(add);
</script>
</body>
</html>

huyao_road

关注

0
点赞
踩
0

收藏

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

函数节流就是预定一个函数只有在大于执行周期时才执行，周期内调用不执行。好像水滴积攒到一定程度才会触发一次下落一样。应用场景;抢购疯狂点击窗口调整页面滚动实现代码：/** * 节流, 让每隔wait毫秒才执行一次handler函数 */function throttle(handler, wait){ wait = wait || 1000; //不传默认是一秒钟 var lastTime...
复制链接

扫一扫

专栏目录