js实现防抖和节流

最新推荐文章于 2024-05-11 15:31:24 发布
最新推荐文章于 2024-05-11 15:31:24 发布
阅读量465 收藏 1
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wb2423500802/article/details/130407395
版权

        作为一个前端开发人员，在开发过程中必不可少的就是考虑性能优化，其中减少发送请求就是一个方面。说到减少请求，就不得不提到防抖和节流了。

1.什么是防抖和节流

    1.防抖

        我们经常会在一些浏览器或者app中发现这样一种情况，我们在一个输入框中输入我们想要搜索的内容，然后下面就会有提示的内容，但是当我们输入得很快得时候，下面却不会有提示，只有当我们输入完了之后，才会有提示，这里就运用了防抖。防抖就是当我们高频率地触发一个事件时，只去执行最后一个触发的事件，这样可以大大减少发起请求的次数。

    2.节流

        节流的作用也是减少高频事件的触发，不同于防抖的是，节流是在一定时间内只执行规定次数的事件，像某些官网做一些抢购的活动，为了防止用户在一个时间段内疯狂点击抢购按钮从而一直触发网络请求，通常会把这个抢购按钮做成节流的。

2.手写防抖和节流

        防抖和节流主要就是对定时器和闭包的使用，

        防抖       

<body>

    <input class="ipt" type="text">

    <script>

        function debounce() {

            //声明一个定时器timer

            let timer = null

            return function () {

                //判断定时器是否已经存在

             

最低0.47元/天 解锁文章
wb2423500802
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS—节流与防抖
weixin_45709829的博客
04-01 4万+
一、js防抖和节流 在进行窗口的resize、scroll、输出框内容校验等操纵的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验，就可以采用防抖（debounce）和节流（throttle）的方式来到达这种效果，减少调用的频率。 二、为什么滚动scroll、窗口resize等事件需要优化 滚动事件的应用很频繁：图片懒加载、下滑自动加载数据、侧边浮动导航栏等。 在绑定scroll、resize事件时，但它发生的时候，它被触发的频率非
手把手教学----JavaScript防抖及节流实现
qq_23355915的博客
09-13 543
JavaScript防抖及节流实现
js中的防抖（debounce）和节流（throttle）
最新发布
qq_43536788的博客
05-11 1102
防抖和节流都是用于优化高频率触发事件的技术，但它们的应用场景和实现方式有所不同。防抖更注重于“最后一次”的操作，适用于需要等用户操作完成后再执行的场景；而节流则更注重于“均匀执行”，适用于需要定期执行的场景。在实际应用中，可以根据具体需求选择合适的技术来优化代码性能。
js实现一个简单的节流操作
qq_48135073的博客
09-30 3349
js节流
JavaScript——防抖与节流
Alan_Walker688的博客
01-13 208
进行小程序开发中遇到了防抖与节流的应用场景，于是学习并整理了 JavaScript 中防抖与节流的个人学习笔记，欢迎读者斧正勘误。
JavaScript节流功能（js节流函数，节流功能的应用与解析，深入了解JavaScript节流函数）
热门推荐
weixin_65793170的博客
04-04 1万+
节流就是某一高频事件不断被触发时，将多次执行变成每隔一段时间执行，具体点就是减少一个事件在一段时间内的触发频率，它是一种常用的函数优化技术，可以限制函数的执行频率，从而提高网页的性能和用户体验，这里带你深入了解下JavaScript节流函数的概念、实现原理和应用场景，并提供一些实用的代码示例。
JS函数节流和防抖之间的区分和实现详解
10-17
JavaScript中的函数节流（Throttle）和防抖（Debounce）是优化性能的重要技术，尤其在处理频繁触发的事件上，如滚动、输入等。两者虽然都能限制函数的执行频率，但工作原理和应用场景有所不同。 **节流（Throttle）...
浅析JavaScript 函数防抖和节流
01-19
函数防抖和节流都是对高频动作触发回调函数的一个优化，实现方式上有类似之处。先从使用场景做个区分。 防抖使用场景： 表单输入框校验 提交按钮避免重复提交 节流使用场景： scroll,mousemove,resize等 函数防抖...
JS防抖和节流实例解析
10-16
主要介绍了JS防抖和节流实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js防抖和节流的深入讲解
10-17
JavaScript中的防抖（debounce）和节流（throttle）是两种常见的性能优化技术，用于控制函数的执行频率，防止因频繁调用而导致的性能问题。这两种技术在处理如输入事件、滚动事件、窗口大小调整等场景时尤其有用。 ...
JS---节流与防抖
xxx割喉的博客
04-20 162
防抖：原理是维护一个定时器，将很多个相同的操作合并成一个。规定在delay后触发函数，如果在此之前触发函数，则取消之前的计时重新计时，只有最后一次操作能被触发。节流：原理是判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数。区别：防抖只会在最后一次事件后执行触发函数，节流不管事件多么的频繁，都会保证在规定时间段内触发事件函数。
Js进阶6-防抖和节流
晴雪月乔的博客
04-06 192
防抖、节流
JavaScript实现节流防抖函数封装
雨落宿命敲的博客
09-16 1058
节流：规定的时间段内只触发一次，例如fps游戏中的射击，一直点着开枪，只会在射速时间内发射一枚子弹。（可以分为第一次马上触发和第一次按规定时间触发）防抖：在事件一直被触发的过程中不会触发，当事件停止触发的一段时间后才会被触发，例如发生这件事儿需要时间等待，如果你反复催促，我就重新计时！节流和防抖都是不希望事件被一直频繁地触发。q3: 节流防抖分别应用在什么地方？q1: argument有什么用？// 防抖函数debounce。// 模拟 ajax 请求。// 第一次按时间触发。// 第一次立即会触发。
js防抖与节流的封装
m0_56219678的博客
08-13 1071
js防抖与节流的封装 防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。（在固定时间内，将多次操作变成一次。） 节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。（一定时间内多个事件合为一个。）......
『函数封装』之防抖与节流
Dpl0216的博客
12-01 1191
防抖和节流两个函数目的都是让存在持续触发的操作减少触发频率，因为按照正常的思维，输入和鼠标移动事件有效的触发肯定是在最后几次。防抖和节流就很有效的解决了输入和鼠标移动中无效触发导致服务器压力增大的问题
js 防抖与节流
weixin_49707375的博客
12-12 383
防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高，导致响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。但二者应对的业务需求不一样，所以实现的原理也不一样，下面具体来看看。01 引入首先举个例子，有这样一个需求：当输入框内容发生改变的时候，响应处理函数在没有加入防抖和节流的效果： 效果：当输入框里每输入一个，就会触发一次 hello()函数。虽然效果达到了，但明显不是我们要的理想效果，假如函数中存在一个ajax请求，意味着我们每输入一个字符，就会向服务器发送一次请求，这是
JS函数防抖与节流
Beatingworldline的博客
10-18 224
JavaScript函数防抖(debounce) 前端开发非常通用的技术点 作用:防止用户短时间内，大量高频的重复点击按钮，导致大量触发请求 <el-button type="primary" round size="small" @click="clickBtn">从选中词汇开始播放</el-button> ... methods: { clickBtn(){ clearTimeout(this.debounce);
浅谈JS防抖与节流
猿小白的博客
07-03 1536
目录 1、名称解释 2、实现代码 （1）防抖代码 （2）节流代码 3、归纳总结 1、名称解释 防抖：防抖就是防止抖动，避免事件的重复触发。应用场景： ①点击按钮事件，用户在一定时间段内的点击事件，为了防止和服务端的多次交互。 ②输入框的自动保存事件 ③浏览器的resize事件节流：节流就是减少流量，将频繁触发的事件减少，控制事件触发的频率。应用场景： ①scroll事件，滚动的过程中每隔一段时间触发事件。 2、实现代码 （1）防抖代码 <!DOCTYPE html>..
JS封装节流与防抖
weixin_46287083的博客
11-21 555
函数节流防抖主要运用一些高频率触发的事件行为中，我们常用到的有 window.onresize、window.mousemove等，这些事件高频率的触发，会造成页面卡顿，另外如果向后台发送请求，无疑会对服务器造成不必要的压力。防抖节流就是限制事件频繁调用，频繁触发的。 一、 函数节流 理解:在函数需要频繁触发时，函数执行一次后，只有大于设定的执行周期之后才会执行第二次 适用多次事件按时间做平均分配触发，例如按钮多次重复点击… 语法：throttle(callback,wait) 功能：创建一个节流函数，在
用javascript实现防抖和节流
03-04
防抖和节流是优化 JavaScript 代码性能的两个重要技术，它们可以控制函数的执行频率，从而提高代码的响应速度和性能。下面是用 JavaScript 实现防抖和节流的示例代码： ## 防抖 防抖可以控制一个函数在一段时间内只执行一次，常用于输入框搜索、滚动加载等场景。以下是一个基本的防抖函数实现： ```javascript function debounce(func, delay) { let timerId; return function(...args) { if (timerId) { clearTimeout(timerId); } timerId = setTimeout(() => { func.apply(this, args); timerId = null; }, delay); }; } ``` 这个函数接收两个参数，第一个参数是要进行防抖处理的函数，第二个参数是等待时间。该函数返回一个新的函数，每次调用这个新的函数时，会启动一个计时器，等待指定的时间后才会执行传入的函数。 例如，假设我们有一个搜索函数 search()，需要防抖处理，等待 500 毫秒后执行。可以这样调用： ```javascript const debouncedSearch = debounce(search, 500); input.addEventListener('input', event => { debouncedSearch(event.target.value); }); ``` 上面的代码将输入框的输入事件绑定到 debouncedSearch 函数上，每次输入事件发生时，debouncedSearch 函数会启动一个计时器，等待 500 毫秒后才会调用 search 函数。如果在 500 毫秒内再次输入事件发生，计时器会被重置，等待时间重新开始计算。 ## 节流 节流可以控制一个函数在一段时间内最多执行一次，常用于滚动事件、resize 事件等场景。以下是一个基本的节流函数实现： ```javascript function throttle(func, delay) { let timerId; return function(...args) { if (timerId) { return; } timerId = setTimeout(() => { func.apply(this, args); timerId = null; }, delay); }; } ``` 这个函数接收两个参数，第一个参数是要进行节流处理的函数，第二个参数是等待时间。该函数返回一个新的函数，每次调用这个新的函数时，会启动一个计时器，如果计时器已经启动，就直接返回，否则会等待指定的时间后才会执行传入的函数。 例如，假设我们有一个图片懒加载函数 lazyLoad()，需要节流处理，等待 200 毫秒后执行。可以这样调用： ```javascript const throttledLazyLoad = throttle(lazyLoad, 200); window.addEventListener('scroll', throttledLazyLoad); ``` 上面的代码将滚动事件绑定到 throttledLazyLoad 函数上，每次滚动事件发生时，throttledLazyLoad 函数会启动一个计时器，等待 200 毫秒后才会调
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值