更智能的JavaScript回调函数解析

本文由PHP100中文网编译,转载请看文末的转载要求，谢谢合作！
每个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响应性的显著提升。这两个函数是前端开发者很实用的工具，但是要记住：“当你有一把锤子的时候，一切看起来都像是钉子”，尽管误用它们是比较难的，但还是要明智的使用它们吧。



PHP100为您推荐与回调函数有关的优秀文章：《JavaScript回调函数应用浅析》，另外为您推荐JavaScript相关的优秀文章：《2014年12月最棒的15个JavaScript库》、《JavaScript 6 的新特性介绍》、《JavaScript开发人员的10个关键习惯》，愿这几篇文章中的知识能让你学到更实用的编程知识和技巧。


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

译文：http://www.php100.com/html/it/focus/2014/1216/8070.html

（翻译：PHP100_Alex）