防抖和节流

防抖

• 概念
  • 在事件触发n秒后才执行，如果期间频繁触发这个事件则重新计时，直接n秒后才执行
  • 例子
    • 比如输入框请求，在用户输入停止后1秒才请求，如果用户一直在输入，则不请求，当用户输入停止之后1秒才开始请求
• 原理
  • 通过定时器来实现
  • 当函数调用时，清除之前定时器，然后重新设置一个新的定时器
  • 只有在定时器到期时，函数才会被执行
• 适用于
  • 需要避免频繁触发操作的场景，只执行最后一次操作

function debounce(func, delay) {
    let timer = null
    return function () {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            func(...arguments)
        }, delay)
    }
}

function search(a, b) {
    console.log(`search${a} and ${b}`)
}

const de = debounce(search, 1500)

de(1, 2)
de(1, 2)
de(2, 3)

节流

• 概念
  • 在固定的间隔时间内，函数只能回被调用一次,间隔内调用不会重新计时
  • 例子 提交按钮，避免连续点击
• 原理
  • 记录上次函数执行的时间，每次调用函数时，判断当前时间与上一次执行时间的间隔是否大于设定值
  • 如果在间隔内 小于设定值，则不执行函数
• 适用于 需要限制函数执行频率的场景，在规定时间间隔内只能执行一次操作

function throttle (func, delay) {
    let isAwait = false
    return function() {
        if (isAwait) return
        func(...arguments)
        isAwait = true
        setTimeout(() => isAwait = false, delay)
    }
}

function search(a, b) {
    console.log(`search${a} and ${b}`)
}

const th = throttle(search, 3000)

th(1 ,4)