更智能的JavaScript回调函数解析

PHP100_Alex

发表于2014-12-17 15:16:19

每个JavaScript开发者都用过回调函数,有些人很喜欢它们,而有些人会有些讨厌它们,但你不能否认的是:只要你接触到了JavaScript代码你就不得不涉及到回调函数。

由于某种原因,有两个漂亮函数的概念并不被很多人所知,这就是分别现存于Underscore库和LoDash库,被称为debounce和throttle的两个函数。

当你在一个时间已经停止发生而你想执行一个动作时,第一个函数会特别有用。例如,一个markdown预览工具可能想在用户停止输入后要等一秒,才能真正的把文本解析到markdown。debounce能够接受一个函数并且返回一个新函数,这个新函数会根据Underscore文档中记录的从上次调用这个函数起到目前为止所耗费的时间,并将延迟它在等待毫秒级的时间后才执行。

如果你不想仅仅为了这个函数而包含整个库,你可以使用这个小技巧,使用用一个debounce的改编版本就好了。

我想谈论的第二个函数是throttle,这个函数能接受一个函数作为参数,并在返回一个新函数,这个函数“当被重复调用的时候,将实际上在每次毫秒级的等待中至多只调用原函数一次”。这点对于发生的太快的事件真的特别有用,因为使用这个函数我们就能够限制调用它的频率,比如对调整大小和滚动事件来说就是这样的。

另外,如果你必须爱那个包含这个函数库,同样也有一个throttle的改编版本。

函数使用实例

下面就让我们来看看在规则的jQuery javascript里面这些函数被用到的例子:

// Let's make sure we don't computate stuff too often // by calling the event handler at most once every 500ms $(window).resize(throttle(function (e) { /* event handling code in here */ }, 500));

总结

正如大家所见,开始使用这些函数实际上非常容易,通过使用它们你极有可能会体验到你正在开发的Web应用整体UI响应性的显著提升。这两个函数是前端开发者很实用的工具,但是要记住:“当你有一把锤子的时候,一切看起来都像是钉子”,尽管误用它们是比较难的,但还是要明智的使用它们吧。

原文:http://federicoramirez.name/smarter-javascript-callbacks/

译文:http://www.php100.com/html/it/focus/2014/1216/8070.html(翻译:PHP100_Alex)