防抖的2种方式 节流的2种方式

最新推荐文章于 2025-12-15 07:24:15 发布
原创 最新推荐文章于 2025-12-15 07:24:15 发布 · 48 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

本文介绍了JavaScript中防抖和节流两种常见的性能优化技术，通过实例对比了在鼠标移动事件中的应用，解释了如何通过setTimeout和clearTimeout来实现这两个功能。

防抖

1，  var num = 1;

let times;

先执行

content.onmousemove = function (){

                //    let obj = times;

                //    clearTimeout(times);

                //    times = setTimeout(()=>{

                //            times = null;

                //    },1000)

                //    if(!obj){

                //            console.log(typeof !obj);

                //            content.innerHTML = num++;

                //    }

                // };

后执行

2，  content.onmousemove = function (){

                //    clearTimeout(times);

                //    times = setTimeout(()=>{

                //            content.innerHTML = num++;

                //    },1000)

                // };   

节流

1， 

延时器

var time;

                // content.onmousemove = function(){

                //    if(!time){

                //            time = setTimeout(()=>{

                //                    time = null;

                //                    content.innerHTML = num++;

                //            },1000)

                //    }

//时间戳

           2 ，     // var content = document.getElementById("content");

                // var num = 1;

                // var timeNew = 0;

                // content.onmousemove = function(){

                //    var timeOld = Date.now();

                //    if(timeOld-timeNew>1000){

                //            timeNew = timeOld;

                //            content.innerHTML = num++;

                //    }

                // }

Agcdlkh
关注
浅谈JS防抖与节流
猿小白的博客
07-03 1867
目录 1、名称解释 2、实现代码 （1）防抖代码 （2）节流代码 3、归纳总结 1、名称解释 防抖：防抖就是防止抖动，避免事件的重复触发。应用场景： ①点击按钮事件，用户在一定时间段内的点击事件，为了防止和服务端的多次交互。 ②输入框的自动保存事件 ③浏览器的resize事件节流：节流就是减少流量，将频繁触发的事件减少，控制事件触发的频率。应用场景： ①scroll事件，滚动的过程中每隔一段时间触发事件。 2、实现代码 （1）防抖代码 <!DOCTYPE html>..
Vue 中使用lodash对事件进行防抖和节流操作
10-15
防抖(debounce)和节流(throttle)的主要区别在于它们处理事件的方式。防抖技术确保在事件触发后的特定时间内，如果再次发生相同的事件，只有最后一次事件会被处理。而节流技术则是在固定的时间间隔内，无论事件触发...
什么是防抖与节流
小赵的博客
11-30 3567
防抖是一种编程技术，用于限制函数在短时间内被频繁调用。当一个函数在短时间内被多次调用时，防抖会延迟执行该函数，直到最后一次调用后的一段时间内没有新的调用才会真正执行。如果在这段时间内又有新的调用，则重新计时。节流是一种编程技术，用于限制函数在一定时间内的调用次数。无论函数被调用多少次，在指定的时间间隔内只会执行一次。节流可以确保函数以固定的时间间隔执行。防抖和节流是前端开发中非常实用的技术，能够有效地减少函数的执行次数，提高性能，优化用户体验。
闭包与节流、防抖
学习笔记分享给大家
05-12 536
节流、防抖
前端高频问题 防抖和节流
xingyu_qie的专栏
05-25 1135
无论是用户输入、滚动事件，还是窗口调整大小，这两种技术都能显著改善用户体验。本文将深入探讨防抖和节流的原理、应用场景及其实现方法，帮助开发者更好地应对前端开发中的高频问题。
Vue 2 中实现 CustomRef 方式防抖/节流
公众号 @ 桃小瑞
02-06 1061
在前端的开发过程中，在涉及到与用户交互的过程中是基本上都是需要处理的，常规操作就是在对应位置加上防抖或者节流。加上防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。以上就是Vue 2 中的实现 CustomRef 方式防抖/节流这篇文章的全部内容。受Vue 3 中的极致防抖/节流（含常见方式防抖/节流）中利用customRef的启发。希望本篇文章对朋友你在使用vue 2的过程中有所帮助。若篇中有不足之处或你有不一样的想法或见解，欢迎在评论区留言 + 关注。
JavaScript：节流与防抖
m0_65029152的博客
07-20 6218
本文主要记录JavaScript中，防抖和节流的相关内容和技术应用；
前端开发之 节流与防抖
李赛赛的专栏
11-18 1424
节流（throttle）与防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
js防抖和节流
黎小小的博客
10-16 876
防抖：在n秒内，多次触发，只执行最后一次节流：事件多次触发，每间隔n秒执行一次定时器方式实现防抖和节流时区别：（清除定时器时机不同）注意如果函数有参数，是在返回函数中获取上下文this和参数，并通过fn.apply(context,args) 方式进行传递。
JS防抖和节流
W2004828的博客
10-17 823
摘要：本文介绍了防抖和节流两种优化高频事件触发的技术。防抖通过延迟执行，确保函数只在事件停止触发后执行（如输入框搜索）；节流则限制函数在一定时间间隔内只执行一次（如滚动事件）。两种方法都使用了闭包和定时器技术，能有效减少冗余执行，提升性能。文章详细说明了实现原理和代码示例，并推荐了lodash库的现成解决方案。适用于表单验证、窗口调整、滚动监听等场景，能显著改善用户体验。
防抖 节流 防抖和节流
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
04-07 1471
防抖==回城；节流==普攻。
vue中使用防抖和节流
01-24
防抖(debounce)和节流(throttle)是两种常用的性能优化策略，它们可以帮助我们控制函数的执行频率，减少不必要的计算，从而提高应用的响应速度和效率。本文将详细介绍在Vue项目中如何实现和使用防抖与节流。 ### 1. ...
当Flutter遇到节流与防抖的思路和流程优化
08-26
函数节流和函数防抖是优化执行代码效率的一种手段，可以控制代码的执行次数，避免频繁的触发或者执行代码造成大量的重绘等问题，影响浏览器或者机器资源。 函数节流是指一定时间内js方法只跑一次。例如，在Flutter...
Vue的click事件防抖和节流处理详解
10-16
为了解决这类问题，我们可以使用防抖（debounce）和节流（throttle）技术。本文将针对Vue框架中的click事件，详细讲解防抖和节流的实现和原理。 首先，我们来解释一下防抖和节流的概念： - 函数防抖（debounce）：...
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 184
Boolean。
DevUI组件库实战：从入门到企业级应用的深度探索，如何快速应用各种组件
2401_86031952的博客
12-11 960
DevUI是华为开源的企业级Angular前端解决方案，提供丰富的UI组件和工程化工具。其表单布局示例展示了垂直表单的实现，包含用户名、密码等字段的实时验证、异步查重及密码一致性检查功能。通过响应式布局和国际化支持，DevUI简化了企业级应用开发，确保高可定制性和一致性设计。
第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）
2402_87628679的博客
12-11 965
gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。
第十一篇：Day31-33 前端安全与性能监控——从“能用”到“安全可靠”（对标职场“系统稳定性”需求）
2402_87628679的博客
12-11 1243
对于小型项目或特定业务场景，可通过自定义埋点实现核心指标监控，无需接入复杂工具。// src/utils/monitor.js（自定义监控工具） import axios from 'axios';// 监控数据上报接口（后端提供） const MONITOR_UPLOAD_URL = '/api/monitor/upload';
商城后台管理系统 03 规格参数配置
最新发布
weixin_52943021的博客
12-15 132
【代码】商城后台管理系统 03 规格参数配置。
vue2 防抖和节流
02-14
### Vue2 中防抖和节流的实现及用法 #### 使用 `eventBox` 工具包实现防抖和节流 在 Vue 项目中，可以通过导入外部工具包来简化防抖和节流功能的实现。例如： ```javascript import { eventBox } from 'js-tool-big-box'; ``` 此方法允许开发者通过简单的 API 调用来应用这些优化技术[^1]。 #### 手动实现防抖 (Debounce) 对于需要控制操作频率的情况，比如输入框自动补全或窗口大小调整事件处理程序，可以采用如下方式定义 debounce 函数： ```javascript function debounce(func, wait) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), wait); } } ``` 当希望延迟执行某个昂贵的操作直到用户停止触发它一段时间之后再真正运行，则非常适合使用上述 debounce 方法[^3]。 #### 手动实现节流 (Throttle) 如果目标是在一定时间内限制某项任务最多被执行一次，特别是针对那些可能被高频次触发的动作如滚动监听器或是拖放交互时，可利用 throttle 技术： ```javascript function throttle(fn, threshhold) { var lastTime = 0; return function() { const now = new Date().getTime(); if ((now - lastTime) >= threshhold) { fn.call(this); lastTime = now; } }; } ``` 这种方式确保即使事件非常频繁发生也只会在指定间隔内响应一次，从而提高性能并减少不必要的计算开销[^2]。 #### 应用场景实例 - **按钮点击**：防止短时间内多次提交表单或其他重要动作； - **下拉加载更多数据**：避免快速滑动屏幕造成过多请求发送； - **鼠标滚轮/移动设备上的触摸平移**：保持界面流畅度的同时降低服务器压力； - **拖拽动画效果**：维持视觉连贯性而不影响用户体验；
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值