JS函数防抖与函数节流

简介: 概念函数防抖(debounce)当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间函数节流(throttle)预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

概念

函数防抖(debounce)

当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间

函数节流(throttle)

预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期

函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

比如如下的情况:

  • window对象的resize、scroll事件
  • 拖拽时的mousemove事件
  • 文字输入、自动完成的keyup事件

区别

可以拿我们平时坐电梯为例来形象地表述二者的区别

函数防抖:如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)。

函数节流 :保证如果电梯第一个人进来后,10秒后准时运送一次,这个时间从第一个人上电梯开始计时,不等待,如果没有人,则不运行

 

实现

函数防抖(debounce)

function _debounce(fn,wait){

    var timer = null;

    return function(){

        clearTimeout(timer)

        timer = setTimeout(()=>{

            fn()

        },wait)

    }

}

 

function _log(){

    console.log(1)

}

window.onscroll = _debounce(_log,500);

 

但是,仔细想想,上面的实现方式还是有一定的缺点。如果页面很长,我们一直在滚动页面,那_log方法就一直不会被执行。所以我们可以升级一下上述的防抖方法。

function _debounce(fn,wait,time){

    var previous = null; //记录上一次运行的时间

    var timer = null;

    return function(){

        var now = +new Date();

        if(!previous) previous = now;

        //当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话,就主动执行一次

        if(now - previous > time){

            clearTimeout(timer);

            fn();

            previous = now;// 执行函数后,马上记录当前时间

        }else{

            clearTimeout(timer);

            timer = setTimeout(function(){

                fn();

            },wait);

        }

    }

}

function _log(){

    console.log(1)

}

window.onscroll = _debounce(_log,500,2000);

 

函数节流(throttle)

function _throttle(fn, time) {

  let _self = fn,

      timer, 

      firstTime = true //记录是否是第一次执行的flag

  return function() {

    let args = arguments, //解决闭包传参问题

        _me = this //解决上下文丢失问题

 

    if(firstTime) { //若是第一次,则直接执行

      _self.apply(_me, args)

      return firstTime = false

    }

    if(timer) { //定时器存在,说明有事件监听器在执行,直接返回

      return false

    }

 

    timer = setTimeout(function() {

      clearTimeout(timer)

      timer = null

      _self.apply(_me, args)

    }, time || 500)

  }

}

 

function _log(){

    console.log(1)

}

window.onscroll = _throttle(_log,500);

 

案例

函数防抖

每一次的用户输入都触发邮箱格式检测事件,造成了浪费,于是设置两次输入之间的时间间隔大于800ms时(用户结束输入时),再执行检查邮箱格式。

Const filter=  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 

$("#email").on("keyup",checkEmail()); 

function checkEmail(){ 

    let timer=null; 

    return function (){ 

        clearTimeout(timer); 

        timer=setTimeout(function(){ 

            console.log('执行检查'); 

        },800); 

    } 

}

当第一次输入事件触发,设置定时:在800ms之后执行检查。

假如只过了100ms,上次的定时还没执行,此时清除定时,重新定时800ms。

紧跟着又来了一次输入,上次定时依然没执行,再次清除定时,重新定时800ms。

直到最近一次的输入,后面没有紧邻的输入了,这最近一次的输入定时计时结束,终于执行了检查代码。

结果是:如果两次输入触发事件的时间间隔不足800ms的,不执行检查代码。 两次触发事件的时间间隔大于800ms了,则前面的执行检查。这就是传说中的函数防抖

 

函数节流:

一个加载新闻的列表页,只要滚动到页面的最下面就继续加载一部分新闻出来,即滚动加载。这时,就要监听滚动事件,判断若滚动到页面底部了,就执行加载新闻的代码。

$(window).scroll(loadMore());  
    function loadMore(){  
        var canRun=true;  
        return function(){  
            if(!canRun){return;}  
            canRun=false;  
            setTimeout(function(){  
                console.log("执行滚动事件");  
                var docHeight=$(document).height();  
                var winHeight=$(window).innerHeight();  
                var scrollDistance=$(window).scrollTop();  
                if( docHeight - (winHeight+scrollDistance) <=100 ){  
                    console.log('加载中...');  
                }  
                canRun=true;  
            },600);  
        }  

由于滚动事件非常频繁,稍微滚动一下就会触发许多次,如果频繁触发的滚动,每一次都去检查是否到页面底部了再次造成了浪费。

于是设置一个开关,一次只能有一个触发执行,并对执行设置计时一段时间再执行,执行完毕之后再解锁。这就是函数节流

 

相关文章
|
8天前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
4天前
|
前端开发 JavaScript
前端 JS 经典:函数管道
前端 JS 经典:函数管道
5 0
|
7天前
|
JavaScript 前端开发 网络架构
函数柯里化:JavaScript中的高级技巧
函数柯里化:JavaScript中的高级技巧
|
8天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
8天前
|
JavaScript 前端开发
JavaScript的`bind`方法:函数的“复制”与“定制”
JavaScript的`bind`方法:函数的“复制”与“定制”
|
8天前
|
JavaScript 前端开发
JavaScript的`call`方法:实现函数间的调用!
JavaScript的`call`方法:实现函数间的调用!
|
9天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
21 2
|
9天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指什么
【5月更文挑战第9天】JavaScript中的异步函数用于处理非立即完成的操作,如定时器、网络请求等。它们可通过回调函数、Promise或async/await来实现。示例展示了如何使用async/await模拟网络请求:定义异步函数fetchData返回Promise,在另一异步函数processData中使用await等待结果并处理。当fetchData的Promise解析时,data变量接收结果并继续执行后续代码。注意,调用异步函数不会阻塞执行,而是会在适当时间点继续。
17 0
|
9天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
17 1
|
9天前
|
JavaScript 前端开发 网络架构
JavaScript中的箭头函数是一种新的函数表达形式
【5月更文挑战第9天】JavaScript的箭头函数以简洁语法简化函数定义,其特性包括:1) 不绑定自身this,继承上下文的this,适合回调和事件处理;2) 没有arguments对象,需用剩余参数语法访问参数;3) 不能用作构造函数,无new调用;4) 没有prototype属性,不支持基于原型的继承。箭头函数在特定场景下优化了this处理,但使用时要注意与普通函数的差异。
15 2