求star

1. debounce()防抖函数:apple:#

某个函数在短时间内只执行最后一次。

延迟n秒执行，如果在n秒内被再次触发，则会重新计时

1.1 普通防抖版：#

function debounce(fn,delay = 200) {
    if(typeof fn !== 'function'){
        return TypeError('fn is not a function')
    }
    let lastfn = null

    return function(...args) {
        if(lastfn){
            clearTimeout(lastfn)
        }
        lastfn = setTimeout(() => {
            lastfn = null
            fn.call(this,...args)
        },delay)
    }
}

1.2 先执行一次，后续进行防抖#

TIP

可通过配置项来决定是否开启执行第一次，后续进行防抖

function debounce(fn, delay = 200, isImmediately = false) {
    if (typeof fn !== 'function') {
        return TypeError('fn is not a function!')
    }
    let lastfn = null
    let flag = true

    return function (...args) {
        if (isImmediately && flag) {
			flag = false
            fn.apply(this,ar)
        } else {
            if (lastfn) {
                clearTimeout(lastfn)
            }
            lastfn = setTimeout(() => {
                lastfn = null
                fn.apply(this, args)
            }, delay);
        }
    }
}

2. throttle()节流函数:apple:#

某个函数在指定时间段内只执行第一次，直到指定时间段结束，周而复始。

n秒内只会执行第一次

function throttle(fn, delay = 200) {
    let flag = false
    return function (...args) {
        if (!flag) {
            flag = true
            setTimeout(() => {
                flag = false
                fn.call(this,...args)
            },delay)
        }
    }
}

3. 区别:apple:#

3.1 相同点:green_apple:#

TIP

• 都可以通过使用setTimeout实现
• 目的都是降低回调执行频率，节省不必要的资源浪费

3.2 不同点:green_apple:#

WARNING

• 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
• 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

4. 应用场景:apple:#

4.1 防抖:green_apple:#

TIP

• 搜索框搜索输入，只需要在用户输入完成后发送一次请求即可
• 手机号，邮箱等的输入验证
• 窗口大小resize。只需要在窗口调整完成后，计算窗口大小，避免多次重复渲染

4.2 节流:green_apple:#

TIP

• 懒加载时要监听计算滚动条的位置,但不必要每次滑动都触发,可以降低计算频率,而不必要浪费CPU资源.
• 鼠标不断触发某事件时,如点击,只在单位事件内触发一次