A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© ljp1234 初级黑马   /  2020-2-28 18:40  /  1716 人查看  /  7 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

更智能的JavaScript回调函数解析
每个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个关键习惯》,愿这几篇文章中的知识能让你学到更实用的编程知识和技巧。

7 个回复

倒序浏览
虚心使人进步,骄傲使人落后
回复 使用道具 举报
虚心使人进步,骄傲使人落后
回复 使用道具 举报
好运会眷顾那些已经做好充足准备的人
回复 使用道具 举报
一份耕耘一份收获,冲鸭!
回复 使用道具 举报
除了恐惧和欲望,还有什么可以激励自己长期地努力?
回复 使用道具 举报
学习要加,骄傲要减,机会要乘,懒惰要除。诶,激励自己的名言,希望对你有用
回复 使用道具 举报
除了恐惧和欲望,还有什么可以激励自己长期地努力?
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马