JavaScript防抖和节流

防抖

1. 概念：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会触发。
2. 应用：百度搜索框。输入关键词之后会调用接口，获取联想词。但是，频繁调用接口会影响性能，所有此时应使用防抖：只有在用户输入完毕的一小段时间后，才会调用接口，出现联想词。
3. 代码

function debounce(handle, delay) {
   var timer = null;
   return function () {
       var _self = this,
           _args = arguments;
       clearTimeout(timer);
       timer = setTimeout(function () {
           handle.apply(_self, _args)
       }, delay)
   }
}

节流

1. 概念：指定的时间间隔内只会执行一次任务。
2. 应用

• 抢购商品。如果不采用节流，那么会有人可以用脚本在很短的时间内触发按钮多次；
• 懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取；

3. 代码

function throttle(handler, wait) {
   var lastTime = 0;
   return function (e) {
       var nowTime = new Date().getTime();
       if (nowTime - lastTime > wait) {
           handler.apply(this, arguments);
           lastTime = nowTime;
       }
   }
}