函数的防抖与节流

防抖

个人理解:高频率的触发事件,等待最后一次事件触发后的间隔一定时间无再次触发才会执行

应用场景:例如在Input的输入框的搜索引擎,由于每次的输入都有相关信息的联动查询效果,然而如果每次的输入都触发显然是对服务器压力会很大,并且前端也会高频率的响应,这个是会很浪费资源的,所以可以用函数的防抖来对其自动关联的模糊查询进行一定的限制

具体代码(低配版普通):

//封装防抖函数
function debounce(fn, delay = 200) {
  let timeout;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

...
//Vue中的使用
methods:{
    submitForm:debounce(function(){...})
}

具体代码(高配juyou立即执行选项):

function debounce(fn, delay, immediate = false) {
            let timeout = null
            return function () {
                clearTimeout(timeout)
                if (immediate) {
                    // 需求立即执行
                    let playNow = !timeout
                    timeout = setTimeout(() => {
                        timeout = null
                    }, delay);
                    if(playNow)fn.apply(this,arguments)
                } else {
                    // 正常延迟执行
                    timeout = setTimeout(() => {
                        fn.apply(this, arguments)
                    }, delay)
                }
            }
        }

节流

个人理解:在一定时间内高频率触发事件时,每隔一段时间自动执行一次

应用场景:例如scroll鼠标滚轮事件,mousemove鼠标滑动等..

具体代码(低配版普通):

let symbol = true

window.onscroll = function(){
	if(symbol){
    	console.log('节流')
    	setTimeout(()=>{
        	symbol = true
        },2500)
    }
    symbol = false
}

这个粗眼看去,和上面防抖的立即执行里的判断有点像,但是实则不然,防抖里的立即执行是重复点击会清空前面的延时器,非要等一锤定音了才会执行,而这个节流则是,一旦点了,那么就会触发,只不过是这个时间段不管你点几次它都只执行一次而已