throttle and debounce

throttle & debounce.md

• throttle 定义了一个函数一段时间内的最多执行次数，比如『执行这个函数最多每100ms执行一次』
• debounce 定义了一个函数在一定时间过去也没有被调用。比如『执行这个函数在没有被调用的100ms之后』

---

var throttle = function(fn, delay){
    var last = 0

    return function() {
        var now = +new Date(),
            context = this,
            args = arguments

        if(now - last > delay){
            last = now
            fn.apply(context, args)
        }
    }
}

var debounce = function(fn, delay){
    var timeId = null

    return function(){
        var context = this,
            args = arguments

        clearTimeout(timeId)

        timeId = setTimeout(function(){
            fn.apply(context, args)
        }, delay)
    }
}

// demo
window.onresize = _.throttle(function(){
  console.log(1)
},1000)
window.onresize = _.debounce(function(){
  console.log(1)
},1000)

window.onresize = throttle(function() {
  console.log(1)
}, 1000)

// 传值
var callback = debounce(function(xx){
    console.log(xx)
}, 1000)

window.onresize = function() {
    callback('value')
}

• throttle 是在 onresize 事件中每隔 delay 就会发生一次 console
• debounce 是在停止 onresize 事件后隔 delay 发生一次 console

React Hooks 中使用

• useDebounce