防抖与节流

最新推荐文章于 2023-06-28 11:03:05 发布
最新推荐文章于 2023-06-28 11:03:05 发布
阅读量103 收藏
点赞数
分类专栏： JS 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linmuqi0928/article/details/124724279
版权

1.防抖：

防抖是指在事件触发n秒后再执行回调，如果在n秒内再次被触发，则重新计算时间。（就是在触发某个事件后，在下一次触发之前，中间的间隔时间如果超过设置的时间才会发送请求，一直触发就不会发送请求）

前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说连续快速的触发 只会执行一次。通过setTimeout的方式限制函数的执行次数，在一定的时间间隔内，将多次触发变成一次触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="submit" id="input">

</body>
</html>
<script>
    let btn = document.getElementById('input')
    // btn.addEventListener('click',submit,false)
    btn.addEventListener('click',debounce(submit),false)

    function debounce(func,delay,immediate) {
        let timer = null
        /*
        * 存在两个问题
        * 1.当前的事件对象如何获取
        * 2.this如何处理*/
        //debounce要返回一个函数 点击btn 由window调用该函数
        //返回的函数就是点击按钮后window调用的函数 会传递一个事件参数，但是我们不能直接传个e 因为我们目前不知道传参的个数是多少
        //当不知道传入参数的个数时 是不能用形参来获取当前的参数列表
        //这里我们使用arguments
        return function() {
            //这里的this是指向input
            console.log(this)
            console.log(arguments[0])
            //当用户多次点击时，定时器就会存在多个 下面if判断 只要存在定时器就会清除重新生成
            //多次点击只会执行一次 就实现了防抖的效果
            if(timer){
                clearTimeout(timer)
            }
            //问题：当我们第一次点击的时候 也执行了延时处理
            //解决
            if(immediate){
                //判断是不是第一次 timer = null时
                /*
                * 注：一般涉及到null判断时 会把null写成布尔值
                * 原因：undefined == null 可能还会造成错误判断*/
                let firstClick = !timer /*timer为null !timer为布尔值true*/
                if(firstClick) {
                    func.apply(this, arguments)
                }
                timer = setTimeout(() =>{
                    timer = null
                },delay)
            }else {
                //限制func的执行
                timer = setTimeout(()=> {
                    //每一个实参列表对应自己内部的函数 这里的实参是定时器函数的 与外层函数的不是同一个
                    /*
                    * 改变实参指向两种方法
                    * 1.用赋值方式
                    * 2.用箭头函数 将内部的arguments指向改成外部函数的arguments指向*/
                    console.log(arguments[0])
                    //这里的this拿的是箭头函数外部的this
                    func.apply(this,arguments)
                }, delay)
            }
        }
    }

    function submit(e){
        //如果是没有包装之前的函数
        //btn.addEventListener('click',submit,false)
        //这里的this指向input
        console.log(this)
        //此时的事件参数e为MouseEvent
        console.log(e)
    }
    function debounce(fn,delay,immediate) {
        return function () {
            let timer = null
            let firstClick = !timer
            if(timer){
                clearTimeout(timer)
            }
                //判断是不是第一次点击
            if(firstClick){
                fn.apply(this,arguments)
            }
            setTimeout(()=>{
                timer = null
            },delay)
        }

    }

</script>

2.节流：

在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="submit" id="input">

</body>
</html>
<script>
    let btn = document.getElementById('input')
    // btn.addEventListener('click',submit,false)
    btn.addEventListener('click',debounce(submit),false)

    function submit(e){
        //如果是没有包装之前的函数
        //btn.addEventListener('click',submit,false)
        //这里的this指向input
        console.log(this)
        //此时的事件参数e为MouseEvent
        console.log(e)
    }

    function throttle(fun,delay) {
        //第一次点击的时间
        let begin =0
        return function () {
            //获取当前时间戳
            let cur = new Date().getTime()
            //当前点击与上一次点击的时间差
            if(cur - begin > delay){
                fun.apply(this.arguments)
                begin = cur
            }


        }

    }


</script>

Lmq!
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
判断防抖--防止用户同时多次点击
JiAyInNnNnN123的博客
07-12 533
首先介绍一下背景： 提交用户信息的一个接口，我不想让用户点击提交之后疯狂点击导致相同的信息像后台发送请求。所以这里用到了，如何判断防抖。 首先说一下防抖和节流的区别。 节流就是指连续触发事件但是在 n 秒中只执行一次函数。 防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 代码如下: //全局中 let lock = tr...
时间节流和防抖
weixin_30273175的博客
04-03 250
　　事件的防抖和节流主要是为了避免用户的重复操作引起浏览器的反复的回流和重绘。 防抖 　　所谓防抖就是，触发事件后，把触发非常频繁的时间合并成一次去执行。比如，在指定的时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算。 　　实现方式： 　　　　var timer; 　　　　btnDom.onclick = () => ...
处理点击时间防抖
即将秃头的吕同学的博客
11-25 409
/** * 主要是处理点击事件防抖的 * @author * */ public class ClickHelper implements OnClickListener { /**　默认防抖时间200毫秒 */ private static final int MIN_CLICK_DELAY_TIME = 200; private long mLastClickTime; private OnClickListener mL; private long mDelayedTime = .
防抖和节流
qq_44308109的博客
06-06 774
目录前言一、 什么是防抖二、什么是节流三、手动实现防抖节流1.防抖（debounce）2.节流（throttling） 前言 防抖和节流都是用于减少触发频率，减少js对dom的操作，提高性能，用于频繁触发的事件mousedown、mousemove、keyup、keydown等 一、 什么是防抖 防抖是指事件触发后在延迟一定的时间再去执行，若在延迟时间内再次触发则重新计算延迟时间；打比方: 大巴车总要等到最后一位乘客上车一分钟后再出发，这时A乘客上车了，大巴车开始倒计时一分钟，但倒计时未结束时，B乘客
09 网络防抖/节流 [debounce/throttle]
970655147的专栏
12-31 581
呵呵 最近前端这边 有这样的一个问题前端会收到消息通知, 拿到消息通知之后 前端需要请求服务器, 拿取最新的数据目前 的处理方式 似乎是会 收到一个消息, 就回请求一次服务器的数据, 假设 短时间内收到了 三四十个消息, 同样也会发送 (三四十 * 需要请求的接口数量)[当时看到的是有 七百多个] 个获取数据的请求。
浅析Vue 防抖与节流的使用
10-15
防抖节流就是使用定时器 来实现我们的目的。这篇文章通过实例代码给大家介绍vue防抖与节流的使用，感兴趣的朋友跟随小编一起看看吧
JS中的防抖与节流及作用详解
10-17
与防抖不同，节流是在固定时间间隔内保证函数至少执行一次。例如，在滚动事件中，我们可能希望每滚动一定距离才更新一次图片的懒加载状态，而不是每次滚动都更新。这样可以减少对浏览器性能的影响。 在提供的代码中...
vue中使用防抖和节流
01-24
本文将详细介绍在Vue项目中如何实现和使用防抖与节流。 ### 1. 防抖(debounce) 防抖技术的主要目的是避免频繁调用某个函数，例如在输入框输入时防止连续触发事件处理函数。当一个函数被频繁调用时，防抖会确保在...
浅析VUE防抖与节流
01-22
防抖和节流到底是啥 函数防抖（debounce） 解释：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。 案例：持续...
JavaScript 函数的防抖与节流
01-08
JavaScript 函数的防抖与节流 防抖和节流可以很好的解决在绑定一些事件（resize，scroll，mousemove ）频繁触发的情况。 防抖和节流的区别 假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况...
实用技能一：防抖与节流
GTbond的博客
12-18 694
防抖与节流 1. 用途 防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 举例来说，一个点击事件会发起一次请求，用户拼命去快速点击，就会发起许多次请求，这显然不合理，防抖节流就是限制这种行为。 注意：防抖是控制次数，节流是控制频率 2. 防抖（debounce） 防抖是无论触发多少次事件，只执行最后一次； 具体来说就是：规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间 案例： 点击.box元素，1s后输出123；在点击了之后，1s内再点多少次，都以最
防抖解析
TinaSlowDown的博客
08-26 345
先简单介绍一下debounce，从最简单的一个场景入手，当用户不断点击页面，短时间内频繁的触发点击事件，只有在用户触发事件后的ns时间内，没有再触发事件，真正的监听函数才会执行，如果在这段时间内再次触发了事件，就需要重新计算这个ns时间。 debounce最主要的作用是把多个触法事件的操作延迟到最后一次触法执行，在性能上做了一定的优化。 这幅图算是很形象地展示了debounce的作用。 正常，移...
防抖和节流的简单理解
想好了再写！
03-21 725
一、防抖：在规定的时间第n秒后才会执行回调，如果在n秒内又被触发，则会进行重置（重新计时）； 应用场景： 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖； 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖 文本编辑器实时保存，当无任何更改操作一秒后进行保存 //封装防抖函数 function debounce(fn, delay = 1000) { // 定义一个变量 let timer
防抖和节流的使用时期
lok_p的博客
06-28 190
在平时遇到的需要节流和防抖的情况
Vue 防抖和节流
wnk1997的博客
02-15 611
防抖：比如股票交易用户不小心连续点了两次下达，为了避免下两笔单子，设置防抖，设置一个时间比如1s，在点击下达后等1s,如果1s内没有再次点下达，就可以成功下达指令了。如果又点了下达，重置1s的等待时间，再等1s,如果这1s没有点击，那就下达指令。 简单实现的逻辑代码： 公共函数utils.js里面写方法 /* * fn [function] 需要防抖的函数 * delay [number] 毫秒，防抖期限值 */ function debounce(fn, delay) { let timer = nu
防抖(debounce) 和 节流(throttling)
热门推荐
独碟的博客
07-05 14万+
防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。 在实时检查输入时，如果我们绑定onkeyup事件发请求去...
防抖函数（多少秒执行一次）
weixin_40461134的博客
01-17 1147
/** * 防抖函数 */ export const debounce = (handler, delay) => { var timer = null; return function () { var _self = this, _arg = arguments; clearTimeout(timer); timer =...
滚动时间延时执行，防抖！
yin_you_yu的博客
06-14 805
function debounce(fn, wait) { var timeout = null; console.log("只进来一次") return function() { console.log(timeout) if(timeout !== null) { cle...
前端常用方法——函数防抖节流(立即执行，非立即执行，时间节流，setTimeout节流 )
weixin_42192909的博客
01-12 1999
前端常用方法——函数防抖节流(立即执行，非立即执行，时间节流，setTimeout节流 ) 场景 ​ 函数防抖分为立即执行和非立即执行，立即执行是指开始立即执行一次，之后在指定时间后再执行才可以执行；非立即执行是指 执行过程中不执行，执行后过一段时间再执行 ​ 函数节流是指根据间隔时间执行 ​ 下面是其简易实现 防抖 // 非立即执行版 function debounce(fn,time) { let timer = null return function() { clearTimeout
vue中的防抖与节流插件
最新发布
08-17
在Vue中，有一些常用的防抖和节流插件可以方便地实现防抖和节流的功能。以下是两个常用的插件： 1. Lodash（防抖和节流） Lodash是一个JavaScript实用工具库，它提供了许多常用的函数和方法，包括防抖和节流函数。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值