JavaScript节流函数

最新推荐文章于 2024-02-26 16:56:39 发布

soosgo

最新推荐文章于 2024-02-26 16:56:39 发布

阅读量329

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/Doulvme/article/details/107978406

版权

Javascript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数节流（throttle）和函数防抖（debounce）就是为了解决类似需求应用而生的。

节流：函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会滴落

场景：

窗口调整（resize）

页面滚动（scroll）

抢购疯狂点击（mousedown）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>节流函数</title>
	</head>
	<body>
		<div id="div">1</div>
		<button id="button">点击</button>
		<script type="text/javascript">
			var div=document.getElementById("div");
			var btn=document.getElementById("button");
			
			function throttle(handler,wait){
				var lastTime=0;
				return function(){
					var nowTime=new Date().getTime();
					if(nowTime-lastTime>wait){
						handler();
						lastTime=nowTime;
					}
				}
			}
			function buy(){
				div.innerHTML=parseInt(div.innerHTML)+1;
			}
			btn.onclick=throttle(buy,1000);
		</script>
		
	</body>
</html>

soosgo

关注

0
点赞
踩
0

收藏

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

在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数节流（throttle）和函数防抖（debounce）就是为了解决类似需求应用而生的。节流：函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会滴落场景：窗口调整（resize）页面滚动（scroll）抢购疯狂点击（mousedown）<!DOCT...
复制链接

扫一扫