函数节流

原本链接：https://segmentfault.com/a/1190000019577510?utm_medium=referral&utm_source=tuicool
函数节流：限制一个函数在一定时间内只能执行一次
在前端开发中，有一些事件或者函数有可能会在短时间内触发多次，比如说：onresize，scroll，mousemove，mousehover等，这些事件的触发频率很高，如果在这些函数内部执行了其他函数，尤其是执行了操作DOM的函数，不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死崩溃，除此之外，重复的ajax调用不仅可能会造成请求数据的混乱，还会造成网络拥塞，占用服务器带宽，增加服务压力
方法一：时间戳方案

//时间戳方案
function throttle(fn,wait){
  var pre = Date.now();
  return function(){
    var context = this;
    var args = arguments;
    var now = Date.now(); 
    if(now-pre >=wait){
      fn.apply(context,args);
      pre = Date.now();
    }
  }
}
function handle(){
  console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));

方法二：定时器方案

//定时器方案
function throttle(fn,wait){
 var timer = null;
  return function(){
    var context = this;
    var args = arguments;
    if(!timer){
      timer= setTimeout(function(){
        fn.apply(contect,args);
        timer = null;
      },wait)
    }
}

}
function handle(){
  console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));
``
函数节流一般用在：
1）懒加载，滚动加载，加载更多或监听滚动条位置
2）百度搜索框，搜索联想功能
3）防止高频点击提交，防止表单重复提交