【JavaScript】节流和防抖详解

发布时间:2023年12月17日

防抖的概念

防抖又叫为函数防抖(debounce):指触发事件后,在 n 秒内函数

只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。

前端开发中,常见的事件如,onresize

scrollmousemove ,mousehover 等会短时间内多次触发(频繁触发),不做限制的话可能一秒执行几百次,

在这些函数内部如果还执行了其他函数,尤其是执行了操作 dom 的函数的话(浏览器操作 DOM 是很耗费性能的),那不仅会浪费计算机资源,

还会降低程序运行速度,甚至造成浏览器卡死、崩溃。

除此之外,短时间内重复调用 ajax 不仅会造成数据关系的混乱,还会造成网络拥堵,增加服务器压力等问题。

防抖代码实现

防抖的关键是需要一个 setTimeout 来辅助实现,延迟运行需要执行的代码。
如果方法多次触发,则把上次记录的 延迟执行代码

clearTimeout 清掉,重新开始计时。
若计时期间事件没有被重新触发,等延迟时间计时完毕,则执行目标代码

注意:当你一直连续不断的点击超过你设置的时间,并且只有第一次点击有效,这不是bug,这是概念问题,注意看下面标红这部分,

防抖又叫为函数防抖(debounce):指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js防抖与节流</title>
</head>
<body>
    <!--按钮-->
    <button id="btn">点击提交</button>

    <script type="text/javascript">

        var num = 1;
        const seckill = () => {
            console.log('我是防抖,你点击了按钮' + num++)
        }

        // 防抖函数
        const debounce = (fun, wait) => {
            let timeout;
            return function () {
                if (timeout) {
                    clearTimeout(timeout);
                }
                //第一次执行任务,timeout是null,此时callNow是true,需要立即执行
                let callNow = !timeout;
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait);
                if (callNow) {
                    fun.apply(this);
                }
            }
        };
        //点击提交按钮
        let btn = document.getElementById('btn');
        //调用方法( 1s内只允许一次操作)
        btn.addEventListener('click', debounce(seckill, 1000));  

    </script>

</body>
</html>

节流的概念

节流又叫函数节流(throttle):指当持续触发事件时,保证一定时间段内只调用一次事件处理函数

节流代码

实现

  • 鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;
  • 在页面的无限加载场景下,需要用户在滚动页面时,每隔一段时间发一次 ajax 请求,而不是在用户停下滚动页面操作时才去请求数据;
  • 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断;

节流和防抖都是差不多的,区别在于是“立即执行版” 和 “非立即执行版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js防抖与节流</title>
</head>
<body>
    <!--按钮-->
    <button id="btn">点击提交</button>

    <script type="text/javascript">

        var num = 1;
        const seckill = () => {
            console.log('点击了按钮' + num++)
        }
        function throttle(callback, delay) {
            var timer, begin = new Date();
            return function () {
                //记录事件触发时的时间
                var current = new Date();
                //清除上一次定时器任务
                clearTimeout(timer);
                //判断距上一次触发是否已过了delay的时间
                if (current - begin >= delay) {
                    callback();
                    begin = current;
                } else {
                    timer = setTimeout(() => {
                        callback();
                    }, delay);
                }
            }
        }
        //点击提交按钮
        let btn = document.getElementById('btn');
        //调用方法( 1s内只允许一次操作)
        btn.addEventListener('click', throttle(seckill, 1000));

    </script>

</body>
</html>

防抖和节流的区别

函数防抖:是n秒内只执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。

函数节流:是间隔时间执行,不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。

原理:

防抖是维护一个计时器

,规定在delay时间后触发函数,但是在delay时间内再次触发的话,都会清除当前的 timer 然后重新设置超时调用,即重新计时。这样一来,只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数,若没到规定时间则使用计时器延后,而下一次事件则会重新设定计时器。

1. 函数防抖(debounce)

函数防抖的设计思路就是在函数执行前加一个等待时间,在这个等待时间内如果该函数又需要执行一次,就重新计算等待时间,再次等待,依次类推

,直到等待时间到了,还没有等到函数又需要执行的情况,才会执行这个函数。

就拿上述的场景来说,假设向后台发送 ajax 请求的响应时间大概是在 2s 左右,那就设置这个等待时间为 2s,当用户第一次点击 加载更多 按钮后,该回调函数

并没有立即执行,也就是还没有开始发送 ajax,此时该函数在等待,如果在 2s 内用户又点击了 加载更多,那就重新计算等待时间,再等待 2s ,此时 2s 过去了,用户没再第三次点击 加载更多 按钮了,那么该函数就开始执行了,向后端发送 ajax 请求了。

函数防抖

实现方式如下:

function debounce(fn, delay){
    let timeId = null
    return function(){
        let context = this
        if(timeId){window.clearTimeout(timeId)}
        timeId = setTimeout(()=>{
            fn.apply(context, arguments)
            timeId = null
        },delay)
    }
}

2. 函数节流

(throttle)

函数节流的设计思路是在函数执行后加一个冷却时间,函数在第一次执行时是立马执行,但在其执行完后设置一个冷却时间,在冷却时间内,该函数不能再次执行,直到冷却时间结束允许该函数执行了,才可以再次执行。

就拿上述的场景来说,冷却时间假设也设置为 2s,在用户第一次点击 加载更多 后按钮的回调函数就会执行,也就是会向后台发送 ajax 请求,此时用户又立马再次点击了 加载更多 按钮,由于此刻 2s 的冷却时间还没有到,那么就会给第二次的函数执行加上一个延迟执行。

function throttle(fn, delay){
    let canUse = true
    return function(){
        if(canUse){
            fn.apply(this, arguments)
            canUse = false
            setTimeout(()=>canUse=true, delay)
        }
    }
}

节流和防抖是什么意思

节流:在一定时间内连续触发某事件,在这段时间段内只执行首次触发的那一次。1s内执行第一次
防抖:在一定时间内连续触发某事件,在这段时间内只执行最后一次触发的那一次。最后一次延时1s后执行

手写节流函数(详见本仓库:造轮子->js篇->throttle.js)

//方法一:利用闭包保存时间
const throttle = function(fn,delay){
  let prev = Date.now()
  return  ()=> {
    let now = Date.now()
    if (now - prev >= delay) {
        fn()
        prev = Date.now()
    }  
  }
}

手写防抖函数

//方法一:利用闭包保存延时器

const debounce = function(fn,delay){
  let timer = null
  return ()=> {
    clearTimeout(timer)
    timer = setTimeout(()=>fn(), delay)
  }
}

防抖 (debounce)

防抖,顾名思义,防止抖动,以免把一次事件误认为多次,敲键盘就是一个每天都会接触到的防抖操作。

想要了解一个概念,必先了解概念所应用的场景。在 JS 这个世界中,有哪些防抖的场景呢

  1. 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖
  2. 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖
  3. 文本编辑器
  1. 实时保存,当无任何更改操作一秒后进行保存

代码如下,可以看出来防抖重在清零 clearTimeout(timer)

function debounce (f, wait) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      f(...args)
    }, wait)
  }
}

节流 (throttle)

节流,顾名思义,控制水的流量。控制事件发生的频率,如控制为1s发生一次,甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。

  1. scroll 事件,每隔一秒计算一次位置信息等
  2. 浏览器播放事件,每个一秒计算一次进度信息等
  3. input 框实时搜索并发送请求展示下拉列表,没隔一秒发送一次请求 (也可做防抖)

代码如下,可以看出来节流重在开关锁 timer=null

function throttle (f, wait) {
  let timer

  return (...args) => {
    if (timer) { return }
    timer = setTimeout(() => {
      f(...args)
      timer = null
    }, wait)
  }
}
文章来源:https://blog.csdn.net/weixin_55639808/article/details/135018521
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。