函数防抖和函数节流及其使用场景

￡神魔★判官ぃ 2023-01-01 03:51 526阅读 0赞

## 函数防抖（debounce） ##

**所谓函数防抖其实就是防止在过于频繁的操作下执行某个事件  
为防止频繁调用，我们通常会在触发动作过N毫秒后，才会去执行该动作，  
如果在这N毫秒内又触发此动作则将重新计算执行时间**

**接下来就用闭包来实现一个防抖函数吧：**

// 防抖函数
    function debounce(fun, waitTime) {
    	let timer = null
    	return function() {
    		clearTimeout(timer)
    		timer = setTimeout(() => {
    			fun().apply(this, arguments)
    		}, waitTime)
    	}
    }
    
    // 防抖过后需要调用的方法
    function doAjax() {
    	console.log('事件执行')				
    }
    
    // 触发动作，比如点击、滚动等
    window.onscroll = debounce(doAjax, 500)
    // 或者
    document.getElementById('div').onclick = function() {
    	debounce(doAjax, 500)
    }
    
    至于在vue里面的写法就略过啦。。。毕竟照猫画虎

## 函数节流（throttle） ##

**所谓节流函数其实也就是先设定一个执行周期，  
当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期**

function throttle(fun, wait, time) {
        let lastTime = null // 记录上一次运行的时间
        let timer = null
     
        return function() {
            let now = new Date().getTime()
            if (!lastTime ) lastTime = now
            // 当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话，就主动执行一次
            if (now - lastTime > time) {
                clearTimeout(timer)
                fun().apply(this, arguments)
                lastTime = now // 执行函数后，马上记录当前时间
            } else {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    fun().apply(this, arguments)
                }, wait)
            }
        }
    }
    function doAjax() {
        console.log('节流执行')
    }
    window.onscroll = throttle(doAjax, 500, 2000)
    // 或者
    document.getElementById('div').onclick = function() {
    	throttle(doAjax, 500, 2000)
    }

**函数节流（throttle）与 函数防抖（debounce）最终目的都是为了限制事件的频繁执行，  
优化事件触发频率过而高导致浏览器响应速度跟不上触发频率，出现延迟，假死或卡顿的现象，  
才能给用户端带来更好的体验**