博客

1 节流

节流 throttle：

实质上就是将高频触发事件的执行频次降低，也可以理解为稀释。


例如：

• 拖拽一个元素时，要随时拿到该元素被拖拽的位置
• 直接用 drag 事件，则会频发触发，很容易导致卡顿
• 节流： 无论拖拽速度多快，都会每隔 100 ms 触发一次

// box 就是可拖拽元素（ draggable="true"）
const box = document.getElementById("box")
let timer = null
box.addEventListener('drag', function (e) {
    if (timer) {
        return
    }
    timer = setTimeout(() => {
        console.log(e.offsetX, e.offsetY)
        timer = null
    },100)
})

// 写成通用函数形式
function throttle (ele, t) {
    let time = null
    ele.addEventListener('drag', function (e) {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            console.log(e.offset, e.offsetY)
            timer = null
        },t)
    })
}

也可以将节流写成如下形式：

// 或者这种形式.参数为 事件（drag)，定时时间
function throttle (fn, t = 100) {
    let timer= null
    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        },t)
    }
}

box.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
},200))

2 防抖

防抖（debounce）：

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。即前一次触发必须执行，后一次触发才能执行。

将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

• 用户输入结束或暂停时，才会触发 change 事件
• 监听一个输入框的文字变化后触发 change 事件
• 直接用 keyup 事件，则会频繁触发 change 事件

// input1 即 对应要监听的文本框
const input1 = document.getElementById('input1')
let timer = null
input1.addEventListener('keyup', function () {
    if (timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        console.log(input1.value)
        timer = null
    }, 500)
})

// 通用函数。参数fn为函数，delay 定时器间隔时间
function debounce (fn , delay) {
    let timer = null
    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
        },delay)
    }
}
input1.addEventListener('keyup',debounce(function(e){
    console.log(input1.value)
},300))