关于前端:防抖和节流

防抖

原理：把一个高频触发的事件提早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))

总结

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