函数去抖与节流

柔情只为你懂 2022-05-18 23:11 126阅读 0赞

//停止改变n毫秒后执行
    		function debounce(method,delay){
    		      var timer=null;
    		       return function(){
    		            var context=this, args=arguments;
    		            clearTimeout(timer);
    		            timer=setTimeout(function(){
    		                method.apply(context,args);
    		            },delay);
    		        }
    		}
    
    		//函数节流，用在一直触发的时候，让他每 n 豪秒执行一次，而不是一直执行
    		var throttle = function ( fn, interval ) {
    		    var __self = fn, // 保存需要被延迟执行的函数引用
    		            timer, // 定时器
    		            firstTime = true; // 是否是第一次调用
    		    return function () {
    		        var args = arguments,
    		                __me = this;
    		        if ( firstTime ) { // 如果是第一次调用，不需延迟执行
    		            __self.apply(__me, args);
    		            return firstTime = false;
    		        }
    		        if ( timer ) { // 如果定时器还在，说明前一次延迟执行还没有完成
    		            return false;
    		        }
    		        timer = setTimeout(function () { // 延迟一段时间执行
    		            clearTimeout(timer);
    		            timer = null;
    		            __self.apply(__me, args);
    		        }, interval || 500 );
    		    };
    		};
    
    		var n = 0
    			function resizehandler(){
    		      	console.log(++n);
    			}
    		window.onscroll=throttle(resizehandler,500);

## 去抖方法为  debounce(func,time); ##

# #

## 函数节流   throttle( fn, time ) ##

发表评论取消回复

表情：

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

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

相关阅读

相关函数防抖和函数节流

数抖动就是在一段时间内频繁的访问一个函数，大量的操作了dom。就可能导致一些性能问题。浏览器会出现卡顿的现象。比如你在执行拖拽滚动条。鼠标移动时获取鼠标的坐标。或者是搜索...

淩亂°似流年/ 2024年04月17日 14:40/ 0 赞/ 65 阅读

相关函数防抖和函数节流

概念　函数防抖（debounce） > 函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。　　简

分手后的思念是犯贱/ 2023年08月17日 16:03/ 0 赞/ 108 阅读

相关函数防抖和函数节流

使用节流防抖函数(性能优化) 那么在 vue 中怎么使用呢：在公共方法中（如 untils.js 中），加入函数防抖和节流方法 // 防抖 ex

「爱情、让人受尽委屈。」/ 2023年03月01日 11:46/ 0 赞/ 45 阅读

相关 JavaScript：函数防抖与节流

什么是函数防抖与节流？函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。定义：防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

客官°小女子只卖身不卖艺/ 2022年10月09日 00:40/ 0 赞/ 189 阅读

相关防抖与节流

防抖与节流防抖函数防抖的应用场景节流函数节流的应用场景在实际开发中，我们会遇到这么一个场景：我们需要注册

╰半橙微兮°/ 2022年09月16日 11:19/ 0 赞/ 177 阅读

相关函数去抖与节流

//停止改变n毫秒后执行 function debounce(method,delay){ var timer=null;

柔情只为你懂/ 2022年05月18日 23:11/ 0 赞/ 127 阅读

相关防抖与节流

防抖：是指一段时间内，没有再触发事件，就执行这个事件；如果一段时间内又触发了这个时间，则清空已经间隔的时间，重新开始计时，等待事件触发。场景：搜索框输入关键字，实时请求后台

女爷i/ 2022年01月18日 22:55/ 0 赞/ 260 阅读

相关 JavaScript系列—函数防抖与函数节流

个人总结防抖：它在用户不触发事件的时，才触发动作。通俗：保证了正常的用户每输入1，2个字符就能触发一次。如果用户是输入法狂魔，也可以狠制他每输入3～6个字符触发

Bertha 。/ 2021年11月02日 00:01/ 0 赞/ 343 阅读

相关函数防抖和函数节流

函数节流 > 高频触发事件，在 n 秒内只会执行一次，所以节流会稀释函数执行的频率。举个例子，古时候人们治水，一般都是直接用堵起来的水坝，把水堵住。但是后来发现，堵不如疏

﹏ヽ暗。殇╰゛Y/ 2021年08月26日 13:39/ 0 赞/ 441 阅读

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

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

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