函数节流和防抖的区别与应用场景(封装&npm包&单元&集成测试)

travis-ci

防抖讲解，具体见函数防抖debounce封装 + npm包 + jasmine单元测试

一、节流效果

(下图⬇️每300ms debounce一次，每1000ms throttle一次，第一次输入的事件均立即触发)

二、节流throttle与防抖debounce区别(分别什么时候用)

throttle节流

当你需要确保一个事件在X毫秒后再触发

debounce防抖

你想推迟执行一个事件，即在上一次触发该事件的X毫秒后

三、节流throttle与防抖debounce应用场景

Throttle节流：

• API的调用
• 按钮点击事件/input事件，防止用户多次重复提交

Debounce防抖：

• 鼠标/触摸屏的mouseover/touchmove事件
• 页面窗口的resize事件
• 滚动条的scroll事件

• 根据实际业务需求来选取，只是业界常这么用，其实都可以

---

四、throttle节流用法Usage

Github链接点此处

npm包点此处

README:

README部分截图

五、代码封装

    var time = time || 600
    var wait = false
    var firstCallWait = firstCallWait || false 

    var callNow = !firstCallWait && !wait
    return function () {
        var context = this
        var args = arguments
        if (!wait) {
            wait = true
            tm = setTimeout(function () {
                tm = null
                wait = false
                return fn.apply(context,args)
            }, time);
        }
        if (callNow) {
            callNow = false
            return fn.apply(context,args)
        }
    }
}

module.exports = throttleTransfer

firstCallWait :
// true -- 事件触发X毫秒后再执行fn方法，以后再触发每隔X毫秒执行一次
// false -- 事件触发，立即执行fn方法，以后再触发每隔X毫秒执行一次

六、 单元测试 Unit Test (Jasmine)

Unit test具体代码点此处

一般unit test的代码比应用代码多得多，侧重点 -----

1. 第一次事件触发是否立即进行节流: jasmine.clock().tick(300) + toHaveBeenCalledTimes()
2. this指向: .call()
3. arguments检测: toHaveBeenCalledWith()

部分截图如下：

Jasmine Unit Test

---

七、Travis CI集成测试

我把Github上的部分项目使用了Travis Ci来托管做集成测试

Travis CI

测试通过，node78910版本均适用
当然啦，Travis CI现在不仅支持node,还有C、PHP、Ruby、Python、Nodejs、Java、Objective-C等等

测试通过以后，自己的npm和GitHub上就会有个超好看的小图标啦

小绿.svg