函数的防抖和节流

一.开门见山，先看函数~

1.防抖函数

/** * 防抖函数 
* @fn 执行的事件 
* @duratioin 间隔事件 
* */ 
export const debounce = (fn,duration = 5000) => {    
    let timer = null    
    return function(...args) {        
        if (timer) clearTimeout(timer)        
        timer = setTimeout(() => {            
        fn.apply(this,args)        
    },duration)    
}}

2.节流函数

/** * 节流函数 
* @fn 执行的事件 
* @gapTime 间隔事件 默认2000ms * */ 
export const throttle = (fn, gapTime = 2000) => {
        let _lastTime = null
     return function () {
        let _nowTime = + new Date()
        if (_nowTime - _lastTime > gapTime ) {
            fn.apply(this, arguments)   //将this和参数传给原函数
            _lastTime = _nowTime
        }
}}

二.定义

1.防抖函数

众所周知，点击事件的执行（除有定时器情况）是立即执行，即点击执行、点击执行、点击执行......但某些场景下，函数的时候为了减少请求次数（或者节省服务器资源）对请求的事件间隔需要做一定的限制。

场景一：支付下单按钮，会有连续请求的情况，更会有恶意点击请求的情况出现。此刻防抖函数的作用就凸显出来，如下

pay.wxml文件
<view bindtap='waitPay'></view>

pay.js文件

//点击支付
waitPay: debounce(function() {        this.pay()}, 1000),
//支付请求
async pay() {
    await setTimeout(() => {
        //发起支付的请求
        console.log('支付~')
    })
}

解释:当点击事件遇到频繁请求时(疯狂的连续点击),没有关系,只有当两次请求的事件大于duration参数时才会发起请求,这样有了防抖函数的作用得以凸显

注意:此案例是以wx小程序举例说明,注意this的指向问题

2.节流函数

pay.wxml文件
<view bindtap='waitPay'></view>

pay.js文件

//点击支付
waitPay: throttle(function() {
        this.pay()
}, 1000),

//支付请求
async pay() {
    await setTimeout(() => {
        //发起支付的请求
        console.log('支付~')
    })
}

解释:当函数的请求是频繁发起时,通过节流函数的限制,主要是gapTime参数的限制,在这个时间内无论函数执行多少次,只有发起的第一次请求会执行,同时在这段时间内的其他请求会屏蔽掉,以此达到节流的目的.

注意:本案例也是以wx小程序来举例说明,请注意this指向问题

三.总结

领导讲话喜欢三点,咱们也要向领导学习,不多就三点......

作为开发人员我们经常说防抖和节流,其实这完全是两个东西,通过我们对业务场景的理解,选用我们的最适合的函数.但为什么一直以来,防抖和节流一直以来都会被一起提起呢?欢迎各位大佬评论区讨论留言~