防抖和节流操作

秒速五厘米 2022-12-28 14:03 153阅读 0赞

## 防抖 ##

防抖操作，我的理解就是，第一次触发事件时，不立即执行操作，设置一个n秒的期限，如果n秒内没有再次触发这个事件，就执行函数；如果n秒内再次触发了事件，则将计时器清零重新开始计时，直到计时器达到n秒，才执行函数。  
这样就达到了短时间内多次触发同一个事件，只会执行一次函数的效果。  
实现：

<button type="primary" @click="clickHandler(2)">提交</button>

export default { 
    	data(){ 
    		return { 
    			clickHandler:null,//防抖操作
    		}
    	},
    	created:function(){ 
    		//this.save是需要被触发的事件，注意不能写成this.save();
    		this.clickHandler = this.debounce(this.save, 1000)
    	},
    	methods: { 
    		//防抖操作函数
    		debounce(fn,wait) { 				
    		    let timer = null;				
    		    return function(...args) {    
    		        if(timer)   clearTimeout(timer);        
    		        timer = setTimeout(()=>{ 
    					fn.apply(this,args)
    				},wait);
    		    }
    		},
    		save:function(type) { 
    			//触发事件
    		}
    	}
    }

## 节流 ##

节流操作就像一个类似控制的阀门，我们只需要控制在时间间隔后开启关闭。对于短时间内触发事件，节流目的想让触发回调函数的频率降低,在某一时间内回调函数是失效状态。

function throttle(fn, delay) { 
         let valid = true//有效的
          return function() { 
              if(!valid) { 
                  return false
              }else { 
                  //工作完后变为 无效
                  valid = false
                  //在一定的时间段变为工作状态
                  setTimeout(() => { 
                      fn();
                      valid = true;
                  }, delay)
              }
          }
      }
        ```

发表评论取消回复

表情：

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

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

相关阅读

相关防抖和节流操作

防抖防抖操作，我的理解就是，第一次触发事件时，不立即执行操作，设置一个n秒的期限，如果n秒内没有再次触发这个事件，就执行函数；如果n秒内再次触发了事件，则将计时器清零重

秒速五厘米/ 2022年12月28日 14:03/ 0 赞/ 154 阅读

相关手写节流和防抖

<body> <button id="btn">点击防抖</button> </body> <script> var btn

Bertha 。/ 2022年12月10日 01:17/ 0 赞/ 198 阅读

相关节流和防抖

事件的触发权很多时候都属于用户，有些情况下会产生问题：向后台发送数据，用户频繁触发，对服务器造成压力一些浏览器事件:window.onresize、windo

忘是亡心i/ 2022年11月29日 11:22/ 0 赞/ 379 阅读

相关 JavaScript 节流和防抖

JavaScript 节流和防抖 JavaScript 节流和防抖节流 1. 简单的节流函数防抖

向右看齐/ 2022年11月17日 14:59/ 0 赞/ 224 阅读

相关节流防抖

/ fn [function] 需要防抖的函数 delay [number] 毫秒，防抖期限值 / function debounce(fn,delay){

今天药忘吃喽~/ 2022年11月04日 12:24/ 0 赞/ 223 阅读

相关防抖、节流-JavaScript

防抖、节流防抖(debounce) JS中的防抖是指触发一个事件后，在一段时间内函数只执行一次，如果在这段时间内事件再次被触发，则重新计算这段时间。例如你进公

Love The Way You Lie/ 2022年09月11日 07:19/ 0 赞/ 225 阅读

相关防抖和节流实现

防抖 1. 在事件被触发后 n 秒再执行回调，如果在这 n 秒内又被触发，则重新计时 2. 实现 / 防抖在事件被触发后 n 秒再执行回调，如果在这

客官°小女子只卖身不卖艺/ 2022年09月08日 14:51/ 0 赞/ 191 阅读

相关节流和防抖

节流和防抖 > 作用：均是为节约计算机资源而生，也就是归属于优化方面 > 原理：均使用`setTimeout`来存放待执行的函数，很方便的利用它的延时机制来确定合适的

以你之姓@/ 2022年05月11日 10:42/ 0 赞/ 252 阅读

相关节流和防抖

在前端开发过程中，我们经常会遇到持续性触发的事件，如：点击事件、滚动事件以及拖拽等，但有时我们并不想让该事件如此频繁的执行时该怎么办呢？这时我们就要用到节流和防抖了，它们能大大

刺骨的言语ヽ痛彻心扉/ 2021年11月17日 14:42/ 0 赞/ 355 阅读

相关节流和防抖

节流和防抖其实没那么高大上节流（throttle）和防抖（debounce）是 JS 中的两个概念，听上去挺高大上的，很多同学也望而却步了，加上这俩概念还很类似，所以也

野性酷女/ 2021年09月18日 02:26/ 0 赞/ 435 阅读