JS函数节流

刺骨的言语ヽ痛彻心扉 2022-05-23 07:22 216阅读 0赞

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

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

应用场景;

1.  抢购疯狂点击
2.  窗口调整
3.  页面滚动

实现代码：

/**
     * 节流, 让每隔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>

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS函数的防抖和节流

为什么要有防抖和节流？为了解决当用户点击请求过快的时候，服务器来不及相应，造成延迟卡死的情况；防抖或节流：限制函数的执行次数；防抖防抖：函数在n

太过爱你忘了你带给我的痛/ 2022年12月28日 14:13/ 0 赞/ 159 阅读

相关 js函数防抖和函数节流

js函数防抖和函数节流函数函数防抖(debounce.js)：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。函

「爱情、让人受尽委屈。」/ 2022年11月22日 05:21/ 0 赞/ 177 阅读

相关 js节流

问题描述：当我们使用移动或者拖动触发事件的时候这些事件会十分灵敏，不进行处理一秒内会触发几十上百次事件里的程序，会影响程序性能；使用节流可指定最快在多少时间内执行，找了下其他博

向右看齐/ 2022年10月26日 12:58/ 0 赞/ 178 阅读

相关 js 函数节流

函数节流 1概念：设定一个特定的时间,让函数在特定的时间内只执行一次,不会频繁执行· 2举例, fps游戏,威标按住不松手,子弹也不会适成一条线 3实现：定时器、

左手的ㄟ右手/ 2022年09月16日 04:56/ 0 赞/ 174 阅读

相关浅谈函数节流

鼠标的mousemove、scroll，浏览器窗口的resize事件等，都是在短时间内重复触发。以onresize事件为例，若事件处理程序需要进行修改元素宽度高度等操作，那么频

逃离我推掉我的手/ 2022年06月17日 04:22/ 0 赞/ 226 阅读

相关 JS函数节流

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

刺骨的言语ヽ痛彻心扉/ 2022年05月23日 07:22/ 0 赞/ 217 阅读

相关 js中的函数节流

对于常见的场景，1、使用onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作，其

Love The Way You Lie/ 2022年05月15日 03:06/ 0 赞/ 230 阅读

相关 Javascript函数节流

最近在做网页的时候有个需求，就是浏览器窗口改变的时候需要改一些页面元素大小，于是乎很自然的想到了window的resize事件,于是乎我是这么写的 ![复制代码][copyc

- 日理万妓/ 2022年04月17日 05:21/ 0 赞/ 229 阅读

相关 JS中使用函数防抖与函数节流

函数防抖原理触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。简单的说，当一个动作连续触发，则只执行最后一次

太过爱你忘了你带给我的痛/ 2021年09月19日 01:12/ 0 赞/ 334 阅读

相关 js实现函数防抖与节流

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。 j...

小灰灰/ 2020年06月02日 12:48/ 0 赞/ 680 阅读