</lylijincheng>

Underscore 中的 _.throttle 和 _.debounce 函数

Underscore 是一个常用的JavaScript函数库,提供了大量工具函数,对原生 JavaScript 中集合(Collections)、数组(Arrays)、函数(Functions)、对象(Objects)提供很便利的操作,其函数式编程的风格灵活有且简洁。其中的常用工具中包括两个函数 _.throttle_.debounce,用来控制函数的调用或执行的方式。

场景

当我们用 JavaScript 去做一些用户与 Web App 交互的操作任务时,通常会去监听页面视图上的事件,以响应用户的某一次操作。其中有些事件在简单的操作时会频繁的发生,比如滚动,缩放等。如果此时有对应事件的回调处理函数,这些函数会在短时间被连续调用多次。如果函数中处理的事情很繁重,浏览器很可能会响应缓慢。

_.throttle

文档给的解释为:

创建并返回一个新的函数,此函数是原函数的一个包装。当此函数被反复调用时,在给定的时间段(毫秒)内只会调用原来的函数一次。当此函数首次被调用时会立即执行原函数,即默认在时间段的开始执行,如果不想一开始就调用可以传递参数 {leading: false},如果不想再在时间段末尾执行,可以传递选项 {trailing:false}

_.throttle 函数调用方式为

_.throttle = function(func, wait, options)

debounce 函数可以使某个任务执行不是很频繁,以此提升浏览器性能。在频繁执行的事件回调,连续重复的Ajax请求时可以用来控制调用的频率和次数。

_.debounce

文档解释是:

创建并返回一个新封装后的函数,但其连续被调用时,函数会延迟其执行直到其上一次被调用完成等待(wait/millseconds)的时间之后。第三个参数 immediate 表示是否立即执行原函数。

_.debounce 函数调用方式为

_.debounce(function, wait, [immediate]) 

在限制一个函数执行频率时很有用,比如 resize 和 scroll 事件的回调函数。

参考文档

Comments