技术控

    今日:60| 主题:49409
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] JavaScript 函数节流和函数去抖应用场景辨析

[复制链接]
我念七年 发表于 2016-10-6 15:49:15
71 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
概述

  也是好久没更新源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗)  
  言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函数去抖。    这篇文章不会涉及具体的代码实现(关于代码实现请期待下文),会从零开始介绍函数节流和函数去抖的概念,辨析应用场景。为什么我对这两个方法情有独钟要花大篇幅去介绍?因为就是它们带我入了「underscore 源码解读」的坑(详见    一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考)。  
  函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听。举个例子,实现一个原生的拖拽功能(不能用 H5 Drag&Drop API),需要一路监听 mousemove 事件,在回调中获取元素当前位置,然后重置 dom 的位置(样式改变)。如果我们不加以控制,每移动一定像素而触发的回调数量是会非常惊人的,回调中又伴随着 DOM 操作,继而引发浏览器的重排与重绘,性能差的浏览器可能就会直接假死,这样的用户体验是非常糟糕的。    我们需要做的是降低触发回调的频率,比如让它 500ms 触发一次,或者 200ms,甚至 100ms,这个阈值不能太大,太大了拖拽就会失真,也不能太小,太小了低版本浏览器可能就会假死,这样的解决方案就是函数节流,英文名字叫「throttle」。函数节流的核心是,    让一个函数不要执行得太频繁,减少一些过快的调用来节流。  
  说完函数节流,再看它的好基友函数去抖(debounce)。思考这样一个场景,对于浏览器窗口,每做一次 resize 操作,发送一个请求,很显然,我们需要监听 resize 事件,但是和 mousemove 一样,每缩小(或者放大)一次浏览器,实际上会触发 N 多次的 resize 事件,用节流?节流只能保证定时触发,我们    一次就好,这就要用去抖。简单的说,    函数去抖就是对于一定时间段的连续的函数调用,只让其执行一次。  
  throttle 应用场景

  函数节流有哪些应用场景?哪些时候我们需要间隔一定时间触发回调来控制函数调用频率?
  
       
  • DOM 元素的拖拽功能实现(mousemove)   
  • 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)   
  • 计算鼠标移动的距离(mousemove)   
  • Canvas 模拟画板功能(mousemove)   
  • 搜索联想(keyup)  
  debounce 应用场景

  函数去抖有哪些应用场景?哪些时候对于连续的事件响应我们只需要执行一次回调?
  
       
  • 每次 resize/scroll 触发统计事件   
  • 文本输入的验证(连续输入文字后发送 AJAX 请求进行验证,验证一次就好)  
  小结

  函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发,而一个方法之所以会被频繁触发,大多数情况下是因为 DOM 事件的监听回调,而这也是函数节流以及去抖多数情况下的应用场景。至于函数节流和去抖方法的具体代码实现以及调用方式,下文我们再做分享。
友荐云推荐




上一篇:The Rise and Fall of Scala
下一篇:iOS开发 路还很长
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

姜礼超 发表于 2016-11-11 19:12:29
听我念七年一席话,省我十本书!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表