web前端防抖和节流

已于 2022-06-13 11:53:53 修改
阅读量354 收藏
点赞数
文章标签： 前端 javascript html
于 2022-06-13 11:31:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuli0927/article/details/125257032
版权

1.防抖：

  设置延迟器，每个一段时间执行一次，执行钱要清除定时器

防抖问题：用户不断在滚动时，防抖函数一直不执行

案例：也i按滚动每隔1秒钟执行函数

<style type="text/css">
            div{
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        
        <script type="text/javascript">
            window.οnscrοll=debounce(showtop,1000)//连续不断地 动作
            function showtop(){
                //获取滚动条位置
                var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
                console.log(scrollTop,'kkk')
            }
            function debounce(fn,delay){//fn被执行函数，delay延时
                let timer=null
                return function(){
                    if(timer){//如果timer存在的话，久清除timer
                        clearTimeout(timer)
                    }
                    timer= setTimeout(showtop,1000)
                }
            }
        </script>

2.节流

<style type="text/css">
            div{
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        <div>qqqqqqqqqqqqqqqq</div>
        
        <script type="text/javascript">
            window.οnscrοll=throttle(showtop,1000)//连续不断地 动作
            function showtop(){
                //获取滚动条位置
                var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
                console.log(scrollTop,'kkk')
            }
            function throttle(fn,delay){
                let vaild =true;//设置的开关
                return function(){
                    if(!vaild){//如果为false执行
                        return false
                    }
                    vaild=false;
                    setTimeout(()=>{
                        fn();//调用方法
                        vaild=true;//重新打开开关
                    },delay)
                }
            }
        </script>

应用场景：

回到顶部

input框输入搜索提示

页面大小发生变化 onresize

对鼠标实时定位

努力站桩的奶酪呦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
页面防抖函数
wenxin_liu的博客
07-12 535
防抖（debounce） 什么是防抖？ 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。 应用场景 (1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源； (2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次； 还是上述列子，这里加入防抖来优化一下，完整代码如下： <!DOCTYPE html> <html lang="
（web前端）防抖与节流
qq_55822444的博客
04-06 431
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。 如下图：当用户在input框当中快速输入手机号码时，就不会触发fn函数，当用户停止触发input事件过2s后才会触发fn函数。 核心代码： //定义防抖函数 functiondebounce(fn,wait){ //1.定义一个定时器 lettimer=...
浅谈web前端节流和防抖
材女的进击
05-21 892
详谈js防抖和节流 1. 防抖（debounce） 1.1 什么是防抖 1.2 应用场景 1.3 实现 2.节流（throttle） 2.1 什么是节流 2.2 应用场景 2.3 实现 3. 小结 本文会分别介绍什么是防抖和节流，它们的应用场景，和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。但二者应对的业务需求不一样，所以实现的原理也不一样，下面具体来看看吧。 1. 防抖（debou.
JS节流和防抖的区分和实现详解
开发猫
02-14 530
  本文主要介绍的是关于JS中比较常用的函数：节流函数和防抖函数，从概念、使用场景到代码简单实现做了一个详细的区分。希望对你有所帮助。 在写JS时，这两个函数比较常见，有时候傻傻分不清用哪个，或者说知道代码要怎么写，但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分，我也来回顾一下，加深一下印象，以便日后用到时心里有底。PS：百度和谷歌搜索前几个介绍都是相反介绍，...
web防抖、节流的使用
wenfu814的博客
07-06 290
工作中经常会使用到 防抖节流 例如 微信支付等 /** * 函数节流 */ // 二、函数节流 // 定义 // 规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。 // 实现原理 // 其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新
浅谈JavaScript节流和防抖函数
10-14
使用这些技术可以有效防止因事件处理器执行过于频繁而引发的性能问题，特别是在处理高频事件如窗口滚动、鼠标移动、窗口大小变化等操作时，节流和防抖变得尤为重要。它们使得浏览器能够更加流畅地处理用户交互，提升...
前端性能优化与Web安全
08-26
- 滚动优化：使用节流和防抖函数处理滚动事件，避免频繁触发。 - 首屏加载：骨架屏提供快速反馈，延迟加载非首屏内容。 **Web安全** 1. **XSS攻击**： - XSS（跨站脚本攻击）通过注入恶意脚本窃取用户数据，...
web前端工程师-高频面试题
10-24
10. 防抖和节流：优化频繁触发的事件处理函数，防抖只执行最后一次，节流控制执行频率。 四、ES6 1. `let/const/var`：`let`和`const`是块级作用域，`const`不可重新赋值。 2. 箭头函数：更简洁的函数语法，没有...
web前端工程师 高频面试题
06-25
13. **防抖与节流**：限制函数调用频率，防抖用于连续触发时只执行一次，节流在规定时间内执行一次。 14. **深克隆与浅克隆**：深克隆复制所有层级，浅克隆只复制一层。 15. **cookie、sessionStorage和localStorage...
javaScript函数节流与防抖之区别
08-11
JavaScript是Web开发中不可或缺的一部分，尤其在前端领域，它的作用尤为重要。函数节流（throttle）和函数防抖（debounce）是JavaScript性能优化的重要技巧，它们主要用于处理频繁触发的事件，如窗口滚动、页面加载...
防抖和节流
不想学习的打工人的博客
02-15 334
防抖和节流是两种应对web页面中频繁触发事件的优化方案，可以在JavaScript库Lodash中的_.debounce()以及_.throttle方法实现
web前端的防抖与节流，你知道吗?
icktpxcls的博客
07-14 383
性能一直是前端老生常谈的一个话题，其中有一个性能问题就是我们会频繁的触发一些事件，例如mousemove、scroll、resize等，虽然浏览器已经对这些事件的触发做了一些优化，但是如果在很短的时间内频繁的触发仍然会影响性能，这个时候就需要今天的主角：防抖和节流，利用它们来进行优化，提高性能。 一 防抖 1 定义 防抖就是将多次高频操作优化为只在最后一次执行（某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次）。通常的使用场景是：用户输入，只需在输入完成后做一次输入校验即可。 2 实现 防抖是将
web前端面试--防抖的原理以及实现（附带源码）
Penk的博客
11-11 785
防抖就是单位时间内，如果只有一个操作，时间到了就执行；如果在单位时间内，你又操作了，那就需要重新计时，以保证最后一次操作是使用者本身已经确定完毕的。
web前端 节流防抖
weixin_41127362的博客
09-06 95
防抖：防止重复点击触发事件 典型应用就是防止用户多次重复点击请求数据。 代码实现要点：设置一个定时器，通过闭包，抓住定时器变量，控制定时器的添加和清除 function debounce(fn, time) { let _arguments = arguments let timeout = null return function () { if (timeout) { clearTimeout(timeout
Web性能优化(一)之防抖和节流
铭小小
03-09 1055
节流 概念：可以举个应用场景来理解，就是在搜索引擎执行过程中，我们每输入一个汉字后，搜索引擎自动执行ajax请求，但是键盘事件是通过字母触发而不是汉字，所以我们就可以固定频率来节约资源。 实现节流使用时间戳 &lt;section style="width: 1200px;height:400px;background: red" id="scry"&gt; &lt;/se...
Web前端必做笔记之一：防抖和节流（一）
qq_42302014的博客
10-18 101
Web前端必做笔记之一：防抖和节流（一） <input type="text"> <script> let inp = document.querySelector("input"); inp.oninput = function(){ //oninput事件：当我们输入内容时就会触发 console.log(this.value); } </script> 我们可以看到当我打出’前端’两个字时，从 ‘q’ 到’前端’执行了很多次事
web前端高级JavaScript - 函数的防抖和节流
lixiaosenlin的专栏
11-06 5901
函数的防抖 函数的防抖：就是对于一些 频繁 的操作，在 一定的时间 内只 执行一次 。 场景描述：比如页面中的按钮点击事件，一般情况下会给按钮绑定一个点击事件，然后当我们点击按钮时就会触发事件并执行某些功能代码（比如请求后台api）。正常情况我们都是点击一下触发一次，但是不排除有人恶意不停的点击按钮，这样的话就会不停的去请求后台api，势必会给服务器造成一定的压力，所以为了防止这种频繁的操作，函数的防抖就诞生了。 实现思路： 需要预先设定一个等待时间（等待多长时间可以执行一次代码） wait 当我们第一
页面优化之防抖
my_web012的博客
07-01 781
防抖就是在事件触发的时候，并没有马上急着去做处理，而是在等待一定时间之后再去执行，也就是说在该时间范围内只发起一次请求，以最后一次为准。就比如浏览器的滚动事件 function debounce(fn,waitTime){ let timer = 0; //定义一个定时器id,方便每次执行都保证能够将之前的定时器销毁 return (args)=>{ if(timer) clearTimeout(timer); timer = setTimeout(()=>{ fn.app
防抖（Debounce）
最新发布
m0_63548381的博客
02-29 3195
防抖是一种前端常用的优化技术，用于防止连续多次触发事件。从而减少不必要的计算、网络请求或者页面渲染，提高性能。当一个事件被触发时，防抖函数并不会立即执行，而是会等待一段指定的时间。如果在这段时间内该事件再次被触发，则会取消之前设定的执行计划，并重新开始计时。这样，只有当事件停止触发并经过了预设的时间后，才会真正执行。通过防抖，可以避免在用户快速连续地进行操作时（例如连续快速点击按钮），服务器或浏览器因为接收到过多无意义的重复请求而造成的性能瓶颈，从而提高页面性能和用户体验。
2023前端面试深度解析：防抖、节流与Vue插槽
防抖（Debounce）和节流（Throttle）是前端开发中常见的性能优化策略，主要用于处理用户频繁触发的事件，如输入框实时搜索、页面滚动等。 **防抖** 的核心思想是限制函数的执行频率，确保在一段时间内（设定的延迟...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值