美文网首页
JS 防抖动

JS 防抖动

作者: 凌风x | 来源:发表于2018-07-26 16:48 被阅读161次

    point:闭包 apply call (...param)

    
    /*
     防抖动 apply 实现
      fnc:需要防抖的函数
      param...:函数的参数列表
      time:防抖时间
      immediate:是否立即执行-- true:第一次有效 之后连续点击无效 直到 最后一次点击开始到防抖时间结束 fnc有效执行
                               false: 从最后一次点击到防抖时间结束 fnc有效执行
      
     debounce_apply(fnc,param...,time,immediate);
    */
    
    var debounce_apply=(function(){
      var timeout;
       return function(){
        var fnc=arguments[0];
        var param=arguments[1];
        var time=arguments[2];
        var immediate=arguments[3];
         if(timeout)clearTimeout(timeout);
         console.log(timeout);
         if(immediate){//立即执行
           //fnc.apply(fnc,param);
            var callNow = !timeout;
             timeout = setTimeout(()=> {
             clearTimeout(timeout);
             timeout = null;
             console.log("timeout=apply=null");
            }, time);
            if(callNow){
            fnc(...param);
            }
         }else{
           timeout=setTimeout(()=>{
            clearTimeout(timeout);
            //fnc.apply(fnc,param);
            fnc(...param);
            timeout=null;
           },time);
         }
       }
    })();
    
    
    /*
     防抖动 call 实现
        testclick:需要防抖的函数
        param:需要对象化的参数列表
        time:防抖时间
        immediate:是否立即执行
        
        
        var param={a:1,b:2,c:3}
        debounce_call(testclick,param,time,immediate);
     
      1.使用call 
            1.1 
                var param={a:1,b:2,c:3};
                fangdou2(testclick,param,2000,false);
                ...
                 fnc.call(param);
                testclick(){
                   console.log(this.a);
                   console.log(this.b);
                   console.log(this.c);
                 }
            1.2  
                 var param={a:1,b:2,c:3};
                 fangdou2(testclick,param,2000,false);
                 ...
                 fnc.call(param);
                  testclick(){
                   console.log(arguments[0]);
                   console.log(arguments[1]);
                   console.log(arguments[2]);
                 }
            1.3   
                var param={a:1,b:2,c:3};
                 fangdou2(testclick,param,2000,false);
                 ...
                 fnc.call(fnc,param);
                  testclick(val){
                   console.log(val.a);
                   console.log(val.b);
                   console.log(val.c);
                 }   
    */
    var debounce_call=(function(){
      var timeout;
       return function(){
        var fnc=arguments[0];
        var param=arguments[1];
        var time=arguments[2];
        var immediate=arguments[3];
         if(timeout)clearTimeout(timeout);
         console.log(timeout);
         if(immediate){//立即执行
          var callNow = !timeout;
             timeout = setTimeout(()=>{
             clearTimeout(timeout);
             timeout = null;
             console.log(" timeout = call=null");
            }, time);
            if(callNow)
           fnc.call(param);
         }else{
           timeout=setTimeout(()=>{
            clearTimeout(timeout);
            timeout=null;
            fnc.call(param);
           },time);
         }
       }
    })();
    
    function testDoudong(flag){
        //"a","b","c";
        var param0=[{name:'wz'},{age:23},{sex:'male'}];
        
        debounce_apply(testclick,param0,1000,flag);
        
        var param={name:'wz',age:23,sex:'male'}
        
        debounce_call(testclick,param,1000,flag);
    }
     
     
    
    
    
    function testclick(val0,val1,val2){
      console.log("===click test===");
      console.log(arguments);
      console.log(val0);
      console.log(val1);
      console.log(val2);
      console.log(this.name);
      console.log(this.age);
      console.log(this.sex);
    }
    
    

    相关文章

      网友评论

          本文标题:JS 防抖动

          本文链接:https://www.haomeiwen.com/subject/hywbmftx.html