函数节流与防抖

原创

丞丞同学 2021-03-20 22:45:07 博主文章分类：前端总结 ©著作权

文章标签 javascript 学习 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者丞丞同学的原创作品，请联系作者获取转载授权，否则将追究法律责任

函数节流与防抖

在最近的面试中，有被问到这个问题，当时没有反应过来，整理一下，供大家参考

函数防抖

函数防抖，就是指触发事件后在一定时间内函数只能执行一次，如果在这段时间内再次触发，则会重新计时，直到事件触发后一定时间内不再触发

简单来说，就是在连续多次的触发事件时，只会执行最后一次

因此，实现函数防抖的关键在于判断一定时间内事件是否触发

实现代码

这一部分是用来测试的盒子以及事件触发的回调函数

var box = document.querySelector('.box');
function test() {
	console.log('按了');
}
box.onclick = debounce(test,1000);//绑定一个点击事件，延时1000ms

在解释代码之前先讲一下清除计时器

我一开始以为清除计时器用null和用clear一样，其实不然

所有的计时器都会有一个返回值，这个返回值就是计时器的唯一标识

当我们将定时器名赋予null时，其实只是将计时器的返回值改为了null而已，定时器还是依旧存在的，我们可以做一下的测试代码

function fn () {
    var timer = setInterval(function () {
    console.log('我是定时器');
    timer = null;
    console.log(timer);
}, 1000);
}
fn();//我是定时器 /n   null
fn();//我是定时器 /n   null

很显然，不管调用几次，定时器依旧存在，只是返回值变成了null

因此我们在实现函数防抖不要以为t = null已经清除了定时器,所以我们在防抖函数中，要用clearTimeout清除定时器

function debounce(fn,delay) {
    var t = null;
    return function() {
        if(t) {
            clearTimeout(t);
        }
        t = setTimeout(function(){
            fn.apply(this,arguments);
        },delay)
    }
}

为了封装一个函数，要尽量的避免污染全局变量，因此采用了闭包，将t作为function的私有变量，不污染全局变量

最后一个问题

为什么要用apply呢？

return以及函数它的调用者都是window，所以这里不存在this指向的问题，但当我们需要传入参数数组时，而这个参数个数又不确定，我们只能用argument来接受不确定个数的参数，因为fn接受的是单一的参数，而不是数组，因此我们采用apply来接受这个数组

函数节流

函数节流是限制一个函数在一定时间内只能执行一次

有了函数防抖的基础，节流操作就简单很多了

实现函数节流的主要是要计算每次触发事件的时间差，如果两次触发事件的时间差大于设定的时间，则直接执行，如果小于，则等待执行。

实现代码

我相信初学者一定和我一样有很多的小问号

function throttle(fn,delay) {
    var t = null;
    begin = new Date().getTime();
    return function() {
        cur = new Date().getTime();
        clearTimeout(t);
        if(cur - begin >= delay) {
            fn.apply(this,arguments);
            begin = cur;
        }else {
            t = setTimeout(function(){
                fn.apply(this,arguments);
            },delay)
        }
    }
}