节流之参数传递在js和vue中的实现

节流(throlle）

简而言之，节流就是控制频率。在一定时间范围内只执行一次该函数调用。

现在实现一个对按钮进行节流的函数。

<button id="btn" >点击</button>

``打印结果,能够实现参数传递

方法

js中参数传递定时器版

 //真正要实现的函数
     function f(a){
        console.log(a +"我是参数");
        console.log("Aaa");
    }
        function throttle(fn,wait){
        let time;
        return function(){ 
        //当没有定时器的时候 执行f函数  执行完毕后  定时器清空
        //如果定时器存在  就不执行f函数
        
               let _that=this;//绑定this指向  
                           if(!time){
                time=setTimeout(function(){ 
                              //如果这里使用的箭头函数就不用绑定this指向
                  fn.call(_that);
                    time=null;
                },wait)
            }
            }   
         }
    btn.onclick=throlle(function(){
            f(1); 
    },1000); 

vue中参数传递定时器版
在方法中调用throlltle函数，传递匿名函数

要暴露的节流函数

export function btnPro(fn,wait){
    let time;
    return function () {
      if(!time){
        let content=this;
        time=setTimeout(function () {
          time=null;
          fn.call(content);
        },wait)
      }
    }
}

在vue调用节流函数传递函数时传递匿名函数，在匿名函数中改变数据，进行函数调用

  again:btnPro(function () {
      this.groupName = '';
      this.checkAllGroup(1);
      },1000),

在vue标签中调用

<el-button type="primary" @click="again">重置</el-button>

踩坑

1. 标签中调用函数时不要加括号，否则每次都重新执行这个节流函数。我们执行节流函数第一次全部执行，以后都是执行匿名函数。

2. 在网上看到了好多使用arguments的，但是试了好几次也不能实现参数传递