JS防抖和节流

最新推荐文章于 2023-04-10 10:05:39 发布
最新推荐文章于 2023-04-10 10:05:39 发布
阅读量213 收藏
点赞数 3
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amethystlry/article/details/116755921
版权

文章目录


函数防抖和节流：解决频繁性的事件触发，实现前端页面性能优化。

情景
<body>
    <div class="box"></div>
    <script>
        let box=document.querySelector(".box");
        let count=0;
        function doSomething(){
            box.innerHTML=count++;
        }
        box.onmousemove=doSomething;
    </script>
</body>

在这里插入图片描述

当鼠标在box上移动时，就会频繁触发doSomething()，其中可能发ajax请求，如果不加以限制的话，这将会严重影响页面性能。此时，防抖与节流就可以派上用场啦~

借助underscore实现

underscore中的防抖函数：_.debounce(事件处理函数，时间间隔，是否立即执行(默认false))

  • 事件处理函数doSomething是在1000ms之后才执行，如果在这段时间内再次调用，则会重新计算执行时间

  • 当预定的时间内没有再次调用该函数，则执行doSomething()

<div class="box"></div>
<script src="./underscore-min.js"></script>
<script>
   let box=document.querySelector(".box");
   let count=0;

   function doSomething(){
       box.innerHTML=count++;
   }
   box.onmousemove=_.debounce(doSomething,1000);
</script>

节流函数：_.throttle(事件处理函数，时间间隔，{leading:boolean(第一次是否触发),trailing:boolean(最后一次是否触发)})，但是leadding和trailing中至少要有一个为true

  • 持续触发mousemove事件，每隔1000ms,触发一次回调
box.onmousemove=_.throttle(doSomething,1000,{
    leading:true,
    trailing:false
});

防抖和节流是很常用的解决频繁事件回调（造成页面性能消耗以及卡顿现象）的方法，但是我们只使用_.debounce()和_.throttle()两个函数没必要引入整个underscore，因此我们在平常的开发中，可以自己先封装好这两个函数。

防抖（debounce）
  • 防抖和节流函数都是返回一个函数
应用场景
  • scroll事件滚动触发（滚动完毕再执行）
  • 搜索框输入查询（输入完毕才发送请求）
  • 表单验证（输入完后才验证）
  • 按钮提交（连续点击按钮）
  • 浏览器窗口缩放（resize事件）
基本实现
  • 注意处理doSomething()中的this指向和event对象
function doSomething(e){
    console.log(this);//this指向Window
    console.log(e);//undefined

    box.innerHTML=count++;
}

function debounce(func,time){
    let timeout;
    return function(){
        let that=this;//this指向当前dom元素
        let args=arguments;//事件对象
        
        if(timeout){
            clearTimeout(timeout);
        }
        timeout=setTimeout(()=>{
            //改变doSomething()中的this指向，传入event对象
            func.apply(that,args);
        },time);
    }
}

box.onmousemove=debounce(doSomething,1000);
立即执行

debounce函数的第三个参数immediate，控制是否立即执行，默认为false，当前还需要处理当immediate为true的情况

当immediate为true的时候，由于immediate的值一直都是true，因此我们定义一个变量flag（!timeout）来标记是否立即调用回调函数，在时间间隔内，将timeout置为null，flag为true的时候立即调用func函数

function debounce(func,time,immediate){
    let timeout;
    return function(){
        let that=this;
        let args=arguments;
        
        if(timeout){
            clearTimeout(timeout);
        }
        if(immediate){
            let flag=!timeout;

            timeout=setTimeout(()=>{
                timeout=null;
            },time);

            if(flag){
                func.apply(that,args);
            }
        }else{
            timeout=setTimeout(()=>{
                func.apply(that,args);
            },time);
        }
    }
}
box.onmousemove=debounce(doSomething,1000,true);
返回值和取消操作

有时候需要用到回调函数的返回值，可以在debounce函数中定义一个变量保存func()的返回值，然后在最后返回

有时候需要在等待时间内取消事件回调，可以将要返回的函数赋值给一个变量，给函数对象添加一个cancel方法，清除定时器

——完整版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            background-color: blueviolet;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button id="btn">取消</button>
    <script src="./underscore-min.js"></script>
    <script>
        let box=document.querySelector(".box");
        let btnObj=document.querySelector("#btn");
        let count=0;

        function doSomething(e){
            box.innerHTML=count++;
        }

        function debounce(func,time,immediate){
            let timeout;
            let res;
            let debounced=function(){
                let that=this;
                let args=arguments;
              
		        if(timeout){
		            clearTimeout(timeout);
		        }
                if(immediate){
                    let flag=!timeout;
                    timeout=setTimeout(()=>{
                        timeout=null;
                    },time);
                    if(flag){
                        res=func.apply(that,args);
                    }
                }else{
                    timeout=setTimeout(()=>{
                        res=func.apply(that,args);
                    },time);
                }
                return res;
            }

            debounced.cancel=function(){
                clearTimeout(timeout);
                timeout=null;
            }

            return debounced;
        }

        let doSome=debounce(doSomething,1000);
        btnObj.onclick=doSome.cancel;
        box.onmousemove=doSome;
    </script>
</body>
</html>
节流(throttle)
  • 如果持续触发事件，每隔一段时间，触发一次
应用场景
  • DOM元素的拖拽功能实现
  • 射击游戏类
  • 计算鼠标移动的距离
  • 监听scroll滚动事件，和防抖有所不同
使用时间戳完成节流函数({leading:true,trailing:false})

第一次会触发，最后一次不会触发

思路：设置一个旧的时间戳old和一个新的时间戳now，若old和now之间的时间差大于时间间隔time则触发一次func回调。初始的时候，将old设置成0，这样鼠标刚移入的时候，时间差必然大于time，因此第一次会触发。

注意更新old的值

function throttle(func,time){
   let old=0;
   return function(){
       let that=this;
       let args=arguments;
       let now=Date.now();

       if(now-old>time){
           func.apply(that,args);
           old=now;
       }
   }
}
使用定时器完成节流函数（{leading:false,trailing:true}）

第一次不会触发，最后一次会触发

思路：利用定时器timeout判断并重新设置定时器执行func函数，鼠标移入的时候timeout没有赋值，取反为true，经过时间间隔time之后调用func函数，同时将timeout设置为null，这样，在时间间隔之后timeout为null，取反又满足条件，继续执行。因此第一次不会触发，最后一次会触发

function throttle2(func,time){
    let timeout;
    return function(){
        let that=this;
        let args=arguments;
        
        if(!timeout){
            timeout=setTimeout(()=>{
                timeout=null;
                func.apply(that,args);
            },time);
        }
    }
}
合并、处理第三个参数
function throttle(func,time,options){
    let old=0;
    let timeout;

    return function(){
        let that=this;
        let args=arguments;
        let now=Date.now();

        if(!old&&options.leading===false){
            old=now;
        }
        if(now-old>time){
            if(timeout){
                clearTimeout(timeout);
                timeout=null;
            }
            func.apply(that,args);
            old=now;
        }else if(!timeout&&options.trailing==true){
            timeout=setTimeout(()=>{
                old=Date.now();
                timeout=null;
                func.apply(that,args);
            },time);
        }
    }
}

box.onmousemove=throttle(doSomething,1000,{leading:true,trailing:true});

throttle函数同样也可以像debounce函数一样处理返回值或者设置取消操作。

Amethyst紫宣
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JS 节流，防抖，bind源码，函数记忆等功能的实现。
Mr_Baoge的博客
04-15 328
学完 渡一，“你不知道的JS”。自己顺手巩固了一下学过的知识点。 1、节流（防止短时间内多次点击按钮会发出多个请求） function throttle(handler,wait){ var lastTime = 0; return function(){ var nowTime = new Date().getTime(); ...
JS 防抖和节流
A-Select °
03-08 162
一部分的用户会有频繁的触发事件执行行为（比如连续点击，滑动滚动条等），这就很有可能导致界面卡顿，甚至浏览器的崩溃，防抖和节流就是来解决这种问题。 1、防抖 触发高频事件后n秒（n为自行设置）内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。注意，只有足够空闲的时间，才执行一次 <div id="debounce" style="width: 100px;height: 100...
跟underscore一起学防抖与节流
weixin_34272308的博客
04-21 353
前言 节流(throttle)和防抖(debounce)是网页性能优化的手段之一，也是大家在开发过程中经常忽视的点。面试也经常会被问，同时是前端进阶重要的知识点。 本文从概述，实现和源码三个部分着手，由浅入深的给大家分析和讲解节流和防抖的原理及实现，使读者能够明白其中原理并能够手写出相关代码。 概述 在解释防抖（debounce）和节流（throttle）之前，我们来看一下下面的例子 此处是被...
学习underscore源码之函数去抖、节流
zxl1990_ok的博客
10-23 319
学习函数去抖、函数节流如何实现以及两者区别
通过闭包实现防抖节流
weixin_42178670的博客
10-17 903
通过闭包实现防抖节流 防抖目的：用户触发时间过于频繁，只执行最后一次。节流目的：控制执行次数。
Javascript面试重点-手写防抖节流函数
m0_71485750的博客
07-08 2908
我们按照如下思路来实现：1.需要接收什么参数:参数一: 回调的函数参数二: 延迟时间 2.返回值是什么最终我们返回结果是要绑定对应的监听事件的, 所以返回值一定是一个新的函数 3.内部实现我们可以在_debounce函数中开启个定时器, 定时器的延迟时间就使用delay并且每开启一个定时器, 我们都需要将上一次的定时器取消掉 这样防抖的基本实现就已经实现完成, 已经可以实现防抖的效果, 我们可使用上一篇的输入框案例测试一下测试代码帮大家拿过来 完成以上代码, 我们已经实现了防抖函数最核心的一
JS防抖和节流实例解析
10-16
因此，为了避免不必要的性能损耗，JavaScript 提供了防抖和节流这两种处理方式。 防抖（debounce）的原理是在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。这样可以有效地减少事件执行的...
JS防抖和节流（详解）
Zhang_wang_yun的博客
04-10 4765
函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
JS函数节流和防抖之间的区分和实现详解
10-17
JavaScript中的函数节流（Throttle）和防抖（Debounce）是优化性能的重要技术，尤其在处理频繁触发的事件上，如滚动、输入等。两者虽然都能限制函数的执行频率，但工作原理和应用场景有所不同。 **节流（Throttle）...
深入了解JavaScript 防抖和节流
10-16
JavaScript中的防抖(debounce)和节流(throttle)是两种常用的优化策略，它们主要用于控制频繁触发的函数调用，以提高性能和用户体验。这两种技术在处理窗口 resize 事件、滚动事件、搜索输入框的实时查询等场景中尤其...
彻底搞懂JavaScript防抖与节流
艾编程带你学前端博客
12-14 794
防抖的概念在连续的事件中，只需触发最后一次回调，也就是将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay（延迟）时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。应用场景搜索框输入查询、手机号、邮箱验证输入检测。只需用户最后一次输入完，再发送请求窗口大小resize。只需窗口调整完成后，计算窗口大小，防止重复渲染。什么是节流使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。节流应用场景。
JS创建对象的四种方式
Amethyst的博客
03-05 3510
对象：特指某个事物，具有属性和方法 创建对象：实例化一个对象的同时对其属性进行初始化 1、字面量创建对象 var obj1={ name:"amethyst", color:"blueviolet", code(){ console.log('love coding'); } } console.log(obj1.color);//blueviolet obj1.code();//love coding 调用系统的构造函数创建对象 var obj2=new
构造函数、实例对象、原型对象
Amethyst的博客
03-05 1550
文章目录构造函数与实例对象之间的关系原型简单的原型写法原型添加方法、属性解决数据共享问题原型中的方法相互访问实例对象使用属性和方法的层层搜索为内置对象添加原型方法原型链改变原型的指向原型最终指向 构造函数与实例对象之间的关系 1、实例对象是通过构造函数来创建的——创建的过程叫实例化 2、如何判断对象是不是这个数据类型？ 1)对象 instanceof 构造函数的名字（更常用） 2)通过构造器的方式：实例对象.构造器==构造函数的名字 console.dir(obj);//console.dir显示对象的结
事件循环例题，你能做对几道？
Amethyst的博客
02-12 735
例题1 new Promise((resolve)=>{ resolve(); }).then(()=>{ console.log(1); Promise.resolve().then(()=>{ console.log(2); }) }).then(()=>{ console.log(3); }) 例题2 new Promise((resolve)=>{ resolve(); }).then(()=>{
数组扁平化的四种方法
Amethyst的博客
05-16 528
文章目录数组扁平化数组扁平化的四种方法数组自带的flat方法利用正则函数递归使用reduce 数组扁平化 数组扁平化是指将一个多维数组变为一个一维数组 const arr=[1,[2,[3,4]]]=>[1,2,3,4] 数组扁平化的四种方法 数组自带的flat方法 const arr=[1,[2,[3,4]]]; console.log(arr.flat(Infinity));// [1, 2, 3, 4] 利用正则 先使用JSON.stringify(arr)将
JS实现瀑布流布局
Amethyst的博客
05-18 488
瀑布流布局的特点：各元素等宽不等高 大概效果如下： 分析 通过定位布局 先确定在浏览器显示区域内，一行能放多少列图片 获取页面的宽度pageWidth（做兼容） 图片盒子宽度itemWidth 间隙gap 列数：column=pageWidth/(itemWidth+gap) 先排第一行 当盒子索引小于列数column的时候，就排在第一行 确定在第一行后，动态设置left的值,top值为0 left=i*(itemWidth+gap) 第一行排好之后，因为第二行需要考虑top值，将
Promise面试题——宏队列和微队列
Amethyst的博客
05-11 457
宏队列和微队列 JS中用来存储待执行回调函数的队列包含两个不同的特定的队列 宏队列：用来保存待执行的宏任务（回调），如：定时器回调、dom事件回调、ajax回调 微队列：用来保存待执行的微任务（回调），如：promise的回调、MutationServer的回调 js首先必须执行完所有的初始化同步代码 每次准备取出第一个宏任务执行前，都要先将所有的微任务一个接一个地取出来执行 分析输出结果： setTimeout(()=>{ console.log('0'); },0); n
reduce方法详解（含数组扁平化、数组去重）
Amethyst的博客
05-16 452
文章目录参数应用场景数组求和reduce实现数组扁平化统计数组中元素出现的次数reduce数组去重 参数 arr.reduce(callback(prev,cur,index,arr),init); prev：上一次调用时的返回值，或者初始值init(传入init) cur：当前正在处理的数组元素 index：和当前正在处理的数组元素一一对应 arr：原数组 init：初始值，该值也决定了返回值的数据类型 常用的参数：prev、cur、init 应用场景 数组求和、求乘积 计算数组中每个元素的出现次
js防抖和节流
最新发布
05-25
防抖和节流都是用来控制函数执行频率的方法。 防抖（debounce）：当事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又触发了事件，则重新计算时间。例如，在输入框中每次输入都会触发 onchange 事件，如果我们希望用户在停止输入 n 秒后再触发回调函数，可以使用防抖来实现。 节流（throttle）：每隔一段时间执行一次回调函数，比如滚动页面时每 200ms 执行一次函数。节流可以让函数在一定程度上平滑执行，减少函数调用的次数，从而提高性能。 下面是防抖和节流的 JavaScript 实现： 防抖： ```javascript function debounce(func, delay) { let timer = null; return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); }; } ``` 节流： ```javascript function throttle(func, delay) { let timer = null; return function(...args) { if (!timer) { timer = setTimeout(() => { func.apply(this, args); timer = null; }, delay); } }; } ``` 使用方法： ```javascript function handleInput() { console.log("input changed"); } const debouncedHandleInput = debounce(handleInput, 500); const throttledHandleInput = throttle(handleInput, 500); // 防抖 input.addEventListener("input", debouncedHandleInput); // 节流 window.addEventListener("scroll", throttledHandleInput); ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值