js 函数节流与函数防抖技巧

函数节流与函数防抖

一、 函数防抖 (debounce)

概念

在事件被触发 n 秒后在执行某个操作, 如果在这 n 秒内再次被触发, 则重新计算时间；即多次动作只执行最后一次

1、举例： 如果有人进入电梯(事件被触发)， 电梯将在10秒后出发，这时候又有人进入电梯(过了5秒，即10秒内再次触发该事件)，则电梯要重新等待10秒（重新计时，此时总共需要等待15秒）

2、实现

function debounce(fn, delay){
   
    // [delay]毫秒之后执行异步，若[delay]毫秒内多次触发重新计时
    return function(){
   
        var _this = this, args = arguments
        fn.timer && clearTimeout(fn.timer)
        
        fn.timer = setTimeout(()=>{
   
            fn.apply(_this, args)
        }, delay)
    }
}

// 实际执行的函数 模拟获取输入框的值异步校验
function ajax(value, isDebounce){
   
    console.log('异步验证唯一性 ', value, isDebounce? '防抖操作'