JS函数防抖

墨蓝 2022-05-23 07:24 215阅读 0赞

函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。好像公交司机会等人都上车后才出站一样。

应用场景：

1.  实时搜索
2.  拖拽

当输完nba之后人会稍微有所停顿，在停顿时才刷新页面

![70][]

实现代码

function debounce(handler, delay){
    	delay = delay || 300;
    	var timer = null;
    	return function() {
    		var _self = this,
    			_args = arguments;
    		clearInterval(timer);
    		timer = setTimeout(function(){
    			handler.apply(_self, _args);
    		}, delay);
    	}
    }

测试用例

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>test</title>
    </head>
    <body>
    	<input type="text" id="inp">
    <script type="text/javascript">
    /**
     * 防抖
     */
    var oInp = document.getElementById('inp');
    function ajax(e) {
    	console.log(e, this.value)
    }
    
    function debounce(handler, delay){
    	delay = delay || 300;
    	var timer = null;
    
    	return function() {
    		var _self = this,
    			_args = arguments;
    		clearInterval(timer);
    		timer = setTimeout(function(){
    			handler.apply(_self, _args);
    		}, delay);
    	}
    }
    
    oInp.oninput = debounce(ajax, 500);
    
    </script>
    </body>
    </html>

[70]: /images/20220523/5a477cee564644c2a682b39d14b9aac3.png

发表评论取消回复

表情：

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

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

相关阅读

相关防抖函数&节流函数

防抖函数能够控制某个方法的执行次数。如果一个方法在一定时间内的执行次数过多而我们并不需要这个方法执行很多次，我们就可以使用防抖函数来减少函数的执行次数。 //

谁践踏了优雅/ 2022年12月26日 09:22/ 0 赞/ 181 阅读

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

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

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

相关 JS编写防抖和节流函数

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行

蔚落/ 2022年11月21日 01:09/ 0 赞/ 222 阅读

相关 JS_js实现防抖节流函数

实现防抖函数防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时 // func是用户传入需要防抖的函数 // wait是等

我不是女神ヾ/ 2022年11月19日 07:45/ 0 赞/ 198 阅读

相关函数防抖

概念函数防抖（debounce）当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间函数节流（throttle）预先设定一个执行周

- 日理万妓/ 2022年10月01日 08:46/ 0 赞/ 201 阅读

相关 js函数防抖

上代码，自己测试。防抖简单说就是减少http请求，前端性能优化 <!DOCTYPE html> <html> <head> <met

小咪咪/ 2022年09月16日 04:54/ 0 赞/ 206 阅读

相关 JS防抖

在前端开发的过程中，有时候我们需要对一些事件进行相应，但是，有时候，这些事件可能会十分频繁的触发。比如： 1、window 的 resize、scroll 2

梦里梦外;/ 2022年06月13日 04:16/ 0 赞/ 236 阅读

相关 JS 防抖

没有防抖： var count = 1; var container = document.getElementById('container');

àì夳堔傛蜴生んèń/ 2022年06月06日 02:14/ 0 赞/ 236 阅读

相关 JS函数防抖

函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。好像公交司机会等人都上车后才出站一样。应用场景： 1. 实时搜索 2. 拖拽当输完nba之

墨蓝/ 2022年05月23日 07:24/ 0 赞/ 216 阅读

相关函数节流-防抖函数

函数节流一个函数执行一次后，只有大于设定的执行周期才会执行第二次，防止高频率的多次执行情景：监听页面滚动时，输出‘我滚动了’，处于优化性能考虑，不希望每次事件触发时

太过爱你忘了你带给我的痛/ 2021年12月20日 08:55/ 0 赞/ 355 阅读