更多课程 选择中心


Web培训

400-996-5531

Web培训

更智能的JavaScript回调函数解析

  • 发布:达内
  • 来源:达内
  • 时间:2015-04-08 18:15

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

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

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

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

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

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

函数使用实例

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

view sourceprint?

01.// Let's make sure we don't computate stuff too often

02.

03.// by calling the event handler at most once every 500ms

04.

05.$(window).resize(throttle(function (e) {

06.

07./* event handling code in here */

08.

09.}, 500));

总结

正如大家所见,开始使用这些函数实际上非常容易,通过使用它们你极有可能会体验到你正在开发的Web应用整体UI响应性的显著提升。这两个 函数是前端开发者很实用的工具,但是要记住:“当你有一把锤子的时候,一切看起来都像是钉子”,尽管误用它们是比较难的,但还是要明智的使用它们吧。 PHP100为您推荐与回调函数有关的优秀文章:《JavaScript回调函数应用浅析》,另外为您推荐JavaScript相关的优秀文章:《2014年12月最棒的15个JavaScript库》、《JavaScript 6 的新特性介绍》、《JavaScript开发人员的10个关键习惯》,愿这几篇文章中的知识能让你学到更实用的编程知识和技巧。


预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:判断手机访问跳转到手机网站页面的javascript代码
下一篇:CSS笔记整理

更智能的JavaScript回调函数解析

判断手机访问跳转到手机网站页面的javascript代码

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省