javascript中的函数大多数情况下都是由用户主动调用触发的，除非是函数本身的实现不合理，否则一般不会遇到跟性能相关的问题。但在一些少数情况下，函数的触发不是由用户直接控制的。在这些场景下，函数有可能被非常频繁地调用，而造成大的性能问题。解决性能问题的处理办法就是函数节流和函数防抖。本文将详细介绍函数节流和函数防抖
常见场景
下面是函数被频繁调用的常见的几个场景
1、mousemove事件。如果要实现一个拖拽功能，需要一路监听 mousemove 事件，在回调中获取元素当前位置，然后重置 dom 的位置来进行样式改变。如果不加以控制，每移动一定像素而触发的回调数量非常惊人，回调中又伴随着 DOM 操作，继而引发浏览器的重排与重绘，性能差的浏览器可能就会直接假死。
2、window.onresize事件。为window对象绑定了resize事件，当浏览器窗口大小被拖动而改变的时候，这个事件触发的频率非常之高。如果在window.onresize事件函数里有一些跟DOM节点相关的操作，而跟DOM节点相关的操作往往是非常消耗性能的，这时候浏览器可能就会吃不消而造成卡顿现象
3、射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
4、搜索联想（keyup事件）
5、监听滚动事件判断是否到页面底部自动加载更多（scroll事件）
对于这些情况的解决方案就是函数节流（throttle）或函数去抖（debounce），核心其实就是限制某一个方法的频繁触发
函数防抖
函数防抖的原理是将即将被执行的函数用setTimeout延迟一段时间执行。对于正在执行的函数和新触发的函数冲突问题有两种处理，也分别对应了定时器管理的两种机制
第一种是只要当前函数没有执行完成，任何新触发的函数都会被忽略，简易代码如下
function debounce(method, context) { //忽略新函数 if(method.tId){ return false; } method.tId = setTimeout(function() { method.call(context); }, 1000); }