手写防抖节流函数

1. 防抖

1.1 什么是防抖?

防抖是触发高频事件后,n秒内函数只会执行一次, 如果n秒内高频事件再次触发,则会重新计算时间.

1.2 为什么需要防抖节流?

我们在平时开发的时候,会有许多场景会频繁触发事件,比如搜索框实时发送请求,onmousemove,resize,onscroll, 由于此类事件会频繁触发,非常消耗浏览器性能和服务器性能,有时候,我们并不能或不想频繁触发事件,此时就需要用到函数的防抖和节流.

1.3 防抖的原理

事件响应函数在一段事件后才执行, 如果这段时间内在次调用内再次调用, 则重新计算执行时间,当预定时间内没有再次调用该函数,则执行事件处理逻辑函数.

下面是简单的防抖实现

function debounce(fn,wait){
    let timeout = null;// 保存延时器的id, 用于清除延时器
    return function(){
        const that = this;// 保存返回函数内部this
        const args = this.arguments// 获取事件函数传递evnet对象参数
        clearTimeout(timeout);//清除事件反复执行时的前一个延时器
        timeout = setTimeout(() => {
            fn.apply(that,args)// 执行事件处理逻辑函数, 改变函数内部this并传参
        },wait)
    }
}

进阶版我们可以给防抖函数添加第三个参数用来立即执行事件处理逻辑函数.而且可以取消操作.

function debounce(func,wait, immediate){
    let timeout,result;// result 用于接受立即执行函数的返回值
    let decounced =  function(){
        const args = arguments;// 获取事件函数传递evnet对象参数
        const that = this;// 获取保存返回函数内部this
        clearTimeout(timeout);//清除上一个延时器, 防止内存泄漏
        if(immediate){
            // 将timeout与callNow建立联系, 当timeout有值时,此时callNow为false
            // 当timeout为null时,此时callNow为true
            let callNow = !timeout;// 用来判断是否立即执行
            timeout = setTimeout(() =>{
                timeout = null;
            },wait);
            // 当callNow为true时,立即执行
            if(callNow) result = func.apply(that,args)
        }else{
            // 不会立即执行
             timeout = setTimeout(() => {
                func.apply(that, args)
            }, wait)
        }
        // 返回立即执行函数的结果
        return result
    }
    //给返回的防抖处理函数添加一个取消防抖操作的方法
    decounced.cancel = function(){
        clearTimeout(timeout);// 清空延时器, 取消防抖操作
        timeout = null;// 由于上面的代码形成了闭包, 所有得手动清空timeout变量, 防止内存泄漏
    }
    return decounced; // 返回防抖处理函数

1.4 防抖的应用场景

搜索框输入查询
表单验证
按钮提交事件
浏览器滚动事件onscroll触发
浏览器窗口缩放, resize事件

2. 节流

2.1 什么是节流?

节流指当高频事件触发时,稀释函数的执行频率,让其只会在n秒内执行一次.

映射到在我们日常生活中,我们咀嚼食物的频率是非常快的,但我们不可能咀嚼一口就把食物咽下去,我们通常只会在咀嚼的几秒后,才把食物咽下去.此时就相当于节流.

思路: 利用时间戳第一版

我们通过每次事件响应函数触发时计算,当前的时间戳与老的时间戳的差,判断是否大于需要等待的时间,此时就触发函数,同时将新的时间戳的值赋值给老的时间戳, 用于计算下一次事件触发的响应时间

function throttle(func,wait){
    let content,args;
    // 之前的时间戳
    let oldTime = 0;
    return function(){
        content = this;
        args = arguments
        // 获取当前时间戳
        let nowTime = new Date().valueOf();
        //如果现在的时间和以前的时间间隔大于等待的时间
        if(nowTime - oldTime > wait){
              // 立即执行
            func.apply(content,args);
            oldTime = nowTime
        }
    }
}

我们不难发现,上面的代码是不顾头,只顾尾的,也就是说事件触发函数的第一次会立即执行, 最后一次不会执行.

思路: 利用延时器setTimeout, 第二版

我们通过一个变量timeout来记录延时器的id,由于第一次默认值为fasle, 此时我们开启延时器并将其返回值赋值给timeout, 当延时器执行完毕时,将timeout赋值为null, 使下一次判断timeout时条件为true, 开启下一轮定时器.

function throttle(func,wait){
    let content,args, timeout;
       return function () {
        content = this;
        args = arguments;
          // 如果timeout没有值, 就开启延时器
        if (!timeout) {
            timeout = setTimeout(() => {
                func.apply(content, args);
                // 延时器执行完之后清空timeout的值
                timeout = null
            }, wait);
        }
}

2.2节流的应用场景

DOM元素的拖拽功能实现
射击游戏
计算鼠标移动的距离
监听scroll事件