防抖和节流

input(e){
   this.setData(){
     iptVal:e.detail.value
   }
 // 清除的是 上一次键盘弹起时,输入的数据所进行的请求
   clearTimeout(this.timer)  //timer与data同级
 //键盘不再弹起,输入完毕时,才进行数据请求
    this.timer=setTimeout(()=>{
     this.getData()
   },500)
}

节流( throttle)

节流是将多次执行变为每隔一段时间执行。节流重在开关锁 timer=null

防止暴力点击（单位时间内第一次执行）放暴力点击：最好的办法，通过设置布尔类型的变量（比如按钮；disabled 或者loading）来控制，判断状态，如果为true，则 return 掉

应用场景

scroll 事件，每隔一秒计算一次位置信息等
浏览器播放事件，每个一秒计算一次进度信息等
input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)

//键盘的input处理事件
1.第一种:利用flag一个标识符,进行处理
input(e){
let flag=true
let timer=''
  if(flag==false) return;
   flag=false
   timer=setTimeout(()=>{
      //事件处理的逻辑
    flag=true
   },1000)
}
2.利用清空timer进行处理
input(e){
let timer=''
  if(!timer) return;
   timer=setTimeout(()=>{
      //事件处理的逻辑
    timer=''
   },1000)
}

js中的防抖和节流

防抖

多次触发,只执行一次

应用场景:input输入的同时,反复发送请求

<body>
      <input type="text" id='unDebounce'>
</body>
</html>

<script>
    //防抖函数
    function _debounce(fn, delay) {
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}

    //模拟一段ajax请求
    function ajax(content){ 
        console.log('ajax request ' + content) 
        };
    let inputa = document.getElementById('unDebounce');
    function fn(e){ ajax(e.target.value) }
    //防抖函数，处理多次被触发的事件，只执行最后一次
    inputa.addEventListener('input', _debounce(fn,1000))
</script>

节流

在规定的时间内只执行一次,间隔执行的

应用场景:连续点击按钮,反复发送请求

(1)时间戳方案

总体可以归纳为5个步骤：

1.定义初始时间
2.获取最新时间
3.最新时间减去初始时间是否大于时间间隔。
4.执行事件函数。
5.把最新时间赋值给初始时间

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));

（2）定时器方案

1.在外层函数内声明定时器变量。
2.判断定时器是否存在。
3.若存在，说明等待间隔时间太短，我们什么也不做。
4.若不存在，说明是第一次，或者上次已执行完毕。那么我们重新创建定时器，执行事件函数，执5.行后把定时器置为null。

function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("mousemove",throttle(handle,1000));