美文网首页
节流函数、防抖函数、函数重载

节流函数、防抖函数、函数重载

作者: Nicholas_liang | 来源:发表于2019-03-24 22:00 被阅读0次

    1、节流函数   当持续触发事件时,保证隔间时间触发一次事件。

    应用场景:处理点击事件,每隔delay时间再次调起点击的真正实现方法,例如调ajax调接口,避免频繁点击对接口的压力;

    var last_time = 0;

        function Throttle(fn,delay) {

            var args = [].slice.call(arguments);

            var now_time = (new Date()).getTime();

            if (now_time - last_time > delay) {

                fn.apply(this,args);

                last_time = now_time;

            }

        }

    2、防抖函数  即 非立即执行

       触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间;

    应用场景 input框模糊搜索的时候 不需要键盘抬起就去发起搜索请求 而是在键盘抬起后的wait时间后再发起模糊搜索;

    const debounce =(func, wait, ...args) =>{

        let timeout;

        return function(){

            constcontext = this;

            if( timeout ) clearTimeout(timeout);

             timeout = setTimeout( ()=> { 

                 func.apply(context, args)

             },wait); 

     }

    }

    3、函数重载   

    通过arguments检测并遍历参数

    应用场景:当merge传入n个参数的时候,我们需要把这些参数整合到一起;

    function merge(root){

      for(var i = 1;i<arguments.length;i++){

        for(var key in arguments[i]){

          root[key] = arguments[i][key] ;

        }

      }

      return root;

    }

    var  merge = merge( { name:'张三' },{ age:20 },{ sex:'男' } );

    console.log(merge)   /  { name:'张三', age:20, sex:'男' }

                                                                                                            未完待续。。。

    相关文章

      网友评论

          本文标题:节流函数、防抖函数、函数重载

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