关于前端:防抖和节流

防抖

原理:把一个高频触发的事件提早n秒触发,在n秒内再次触发这个事件的话,就从新计算这个n秒,让事件防止频繁触发

/*
* 防抖
* 防抖的原理是:把一个高频触发的事件提早n秒触发,在n秒内再次触发这个事件的话,就从新计算这个n秒,让事件防止频繁触发
*/
function debounce(fn,delay) {
    let timer
    return function() {
        if(timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            fn.apply(this,arguments)
        },delay)
    }
}

function sayHello() {
    console.log('Hello')

// 案例:input框的输出关键词搜寻
document.getElementById('search').addEventListener('keyup',debounce(sayHello,500))

节流

原理:让一个高频触发的事件在n秒内只触发一次

/*
* 节流
* 节流的原理是:让一个高频触发的事件在n秒内只触发一次
*/
function throttle(fn,dalay) {
    let canRun = true
    return function() {
        if(!canRun) return
        canRun = false
        setTimeout(() => {
            fn.apply(this,arguments)
            canRun = true
        },dalay)
    }
}

function sayHi() {
    console.log('Hi')
}

// 案例:input框的输出关键词搜寻
document.getElementById('search').addEventListener('keyup',throttle(sayHi,1000))

总结

  • 防抖和节流都是解决高频触发的问题的
  • 防抖和节流的原理不一样,大部分场景下,两者任意抉择,只有特定场景会更好,总的来说,用哪个形式,看本人的业务需要
  • 防抖和节流必定不止这一种,这里只是最常见的一种

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理