深入浅出js函数防抖与节流

简介: 笔记

函数防抖概念简述

当持续触发事件时,一段时间内只能触发一次。将几次操作合并为一此操作进行。比如说有一条赛车通道,赛车通过的时间为5s,5s之后到达终点,执行领奖操作。

30.png

这5s之内只允许一辆赛车在通道内,如果第一辆赛车还在通道内,此时第二辆赛车已经进来了,那么销毁第一辆赛车,从第二辆车入场重新计时5s执行领奖操作。

2.png

经典应用场景

<input placeholder="请输入电话" type="number"/>

此input框需要进行一个即时查询,所以需要实时监听用户在input输入的值。拿到值后发送请求给后台,返回数据进行电话匹配。

通常的写法

  let telInput = document.querySelector('input');
    telInput.addEventListener('input', function(e) {
            //如果直接每次发请求,会导致性能问题
            //数据请求
            $.ajax({})
    })

此时存在的问题是,如果这个过程中不断的发送请求,当请求过多、数据量过大时,浏览器很容易卡死或者崩溃,服务器也处理不过来。

此时就要进行函数防抖的处理,如下:

let telInput = document.querySelector('input');
    telInput.addEventListener('input', function(e) {
            //如果直接每次发请求,会导致性能问题
            //数据请求
            let timeOut = null;
            if(timeOut){
        clearTimeout(timeOut)
      }else{
        timeOut = setTimeout(()=>{
          $.ajax({})
         },2000)
      }
    })

此时,当监听到用户输入时,就会进行判断,如果用户输入第一个字符与第二个字符的时间间隔小于2s,那么从第二个字符开始重新计时。当用户停下来了,2s过后请求数据。

当然,我们还可以封装一下,如下:

//fn(方法),wait(等待时间) 都是参数 调用传进来就可
function antiShake(fn, wait) {
        let timeOut = null;
        return args => {
            if (timeOut) clearTimeout(timeOut) 
                timeOut = setTimeout(fn, wait);
        }
    }

调用

let telInput = document.querySelector('input');
//数据请求方法
function demo(){
  $.ajax({})
}
telInput.addEventListener('input',antiShake(demo,2000));

函数节流概念简述

当持续触发事件时,保证一定时间段内只调用一次事件处理函数。节流,顾名思义,节制流入或流出。比如说水龙头放水,一旦打开开关,水流就会很快,我们要做的就是限制流出。

经典应用场景

移动端touch事件

<div class="box"></div>
<script>
let box= document.querySelector('.box');
box.addEventListener("touchmove", function (e){
        //do something
        //ajax({})
        //...
})
</script>

如果直接用以上的写法,touchmove里的方法或事件,会一直执行,只要手指发生了移动,就会执行。


即使手指移出了 原来的target 元素,但是touchmove 仍然会被一直触发,而且 target 仍然是原来的 target 元素。

touchmove事件会多次重复触发,由于移动端计算资源宝贵,尽量保证事件节流。


那么,思路是怎么样的呢?

3.png

把整个事件处理器比喻成客运站,如果客运大巴到站就走,那么路上肯定会发生交通拥堵,而且车大部分是空的,因为没给时间上客,虚假繁忙的情况肯定是不好的,那么怎么处理呢?

设置一个时间间隔,时间间隔内只允许执行一次,客运站大巴设定一个时间,到点才会走。

  let time = null;
    box.addEventListener("touchmove", function (e){
        if(!time){
            time = setTimeout(()=>{
                //do something
            //ajax({})
            //...
                time = null;
            },1000)
        }
    })

同样的,为了方便,可以封装一下

function throttle(event, time) {
        let timer = null
        //timer状态要常驻内存,这里做了一个闭包
        return function() {
            if (!timer) {
                timer = setTimeout(() => {
                    event();
                    timer = null
                }, time)
            }
        }
    }

调用

function demo(){
   //do something
     //ajax({})
     //...
}
box.addEventListener("touchmove",throttle(demo,2000));

当然,还有第二种办法,通过时间戳

let throttle = function(func, delay) {            
  let prev = Date.now();            
  return function() {                
    var context = this;                
    var args = arguments;                
    var now = Date.now();                
    if (now - prev >= delay) {                    
      func.apply(context, args);                    
      prev = Date.now();                
    }            
  }        
}        
function demo() {            
  //do something
    //ajax({})
    //...      
}        
box.addEventListener('touchmove', throttle(demo, 2000));

FAQ

大家很容易混淆函数防抖与节流的概念,一句话总结:

节流是把一定时间内的多个事件合为一个

防抖是固定的时间内,事件只允许发生一次

讲的很详细了,如对大家有帮助,欢迎评论转发。如果有错误,敬请指正。

目录
相关文章
|
4天前
|
JavaScript 前端开发 UED
深入理解JavaScript中的节流与防抖技术
理解并合理运用节流与防抖技术,可以帮助我们优化事件处理函数的执行频率,从而提升应用的性能和用户体验。这两种技术通过减少不必要的计算和DOM操作,使得Web应用程序能够更加流畅地运行。 通过掌握防抖和节流的实现原理及应用场景,开发者可以更加灵活地编写高效且性能优化的代码,对于面对高频事件处理时尤其重要。在开发中合理选择使用防抖或节流,将直接影响到应用的响应性和效率。
8 1
|
1月前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
1天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
9 3
|
1天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
13 7
|
2天前
JS-函数封装数组求和案例
JS-函数封装数组求和案例
|
1天前
|
JavaScript 前端开发 容器
JavaScript 函数
JavaScript 函数
|
3天前
|
JavaScript 前端开发
Node.js 函数
Node.js 函数
11 4
|
16天前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
23天前
|
JavaScript 前端开发 Java
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
25 0
|
26天前
|
前端开发 JavaScript
前端 JS 经典:函数管道
前端 JS 经典:函数管道
6 0