首页 > 技术文章 > 节流与防抖,函数的自带方法call与apply

BR-Tao 2019-08-14 18:10 原文

节流

当一个函数需要频繁的被调用时,会消耗大量的资源,使用节流的方式会减少资源的消耗

即在规定时间内只让函数触发的第一次生效,后面不生效。

 //fn为需要执行的函数,dalay为需要延迟的时间
    function throttle(fn,delay){
        //记录上一次函数触发的时间
        var lastTime = 0;
        //使用闭包能防止让lastTime的值在每次调用时都初始化为0
        return function(){
            var nowTime = Data.now();
            if(nowTime-lastTime > delay){
                //修正this的指向问题
                fn.call(this);
                //将时间同步
                lastTime = nowTime;
            }
        }
    }

防抖

一个需要频繁触发的函数需要在规定时间内,只让最后一次生效,前面的不生效

function debounce(fn,delay){
        //记录上一次的延时器
        var timer = null //第一次设置为空
        return function(){     //使用闭包防止每次调用时将timer初始化为null;
            clearTimeout(timer)   //清除上一次的延时器
            //重新设置新的延时器
            timer = setTimeout(function(){    //设置延时器
                fn.apply(this);   //修正fn函数的this指向
            },delay) 
        }
    }

 

关于函数的call()和apply()方法

call和apply都是Function对象的原型方法,它们是把特定的函数当作一个方法绑定到指定的对象上进行调用。

apply和call的方法和功能用法相同,区别是他们传递的参数的方式不同,其中apply()是用数组的方式进行传递参数,call方法则用数值的方式进行传递参数。

而且call()方法只能接受多个参数列表,apply()方法只能接收数组或者伪类数组,数组元素将作为参数传递给被调用的函数。

推荐阅读