浅谈JavaScript节流与防抖

2024-10-01 10:01:30

节流与防抖

背景：当我们频繁去请求资源、接口等其他的时候，就会造成操作Dom频繁，接口压力大等等，性能下降。比如我有时候会每次搜索会猛地敲回车，在网络不很好的时候，点击下一页按钮的时候也会一直点，可能网络不好也可能服务器性能低。

为了避免频繁触发同一事件或请求，这时候就要用到节流和防抖了。

what？这是啥？当我第一次听到这两个名字的时候，心想是指节省流量、防止手抖吗。百思不得其解，赶紧就去学习。

概念：

简单来说：节流和防抖就是为了防止事件在短时间内多次触发的两种解决方案。都是用过减少请求的次数，来降低压力，提高性能。

区别

节流：在一定的时间内只会请求一次。

可以理解为：公交车，每个人是一次点击请求，每十分钟开一趟车，发送请求

防抖：触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。

比如在一段时间内，我一直点击按钮，以最后一次点击为准发送一次请求。

节流实现

解决思路：

使用时间戳（发生在一段时间的开始），就是在计算

当前点击的时间 - 上一次执行函数的时间 > 我设定的时间戳，就执行一次函数

缺点：第一次直接触发最后一次一段时间内无法触发

给一个场景，当我们搜索数据的时候，发起请求，没有做处理是这样的，请求肯定太过于频繁

节流函数

代码：

<body>
    <div>
        <span>节流处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
//节流函数
    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var last = 0;  //上一次结束的时间
        return function () {
            var cur = Date.now()
            console.log(cur-last)
            if (cur - last > delay) {
                fn.apply(this, arguments)  //执行函数
                last = cur //更新上一次时间
            }
        }
    }
</script>

效果：

防抖实现

解决思路：

定时器（发生在定时结束）。缺点：第一次不触发最后一次延迟触发

就是设置一个定时器，如果一直点击则清除定时器，最后一次开启定时器

防抖函数

代码：

<body>
    <div>
        <span>防抖处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
    function debounce(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var time = null;  //定时器
        return function () {
            clearTimeout(time);  //清除定时器
            let context = this;  //获取当前button上下文 如果不指定，箭头函数就会一直往外找到window
            let args = arguments;
            time = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    }
</script>

效果：

防抖升级版

第一次触发和最后一次延迟触发

代码：

    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        let time = null
        let flag=true  //标识是不是第一次触发
        return function () {
            clearTimeout(time)
            if (flag) {
                fn.apply(this, arguments)
                flag=false
            }
            time = setTimeout(() => {  //触发定时器
                fn.apply(this, arguments)
                flag=true
            }, delay)
        }
    }

效果：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

节流与防抖

为了避免频繁触发同一事件或请求，这时候就要用到节流和防抖了。

what？这是啥？当我第一次听到这两个名字的时候，心想是指节省流量、防止手抖吗。百思不得其解，赶紧就去学习。

概念：

简单来说：节流和防抖就是为了防止事件在短时间内多次触发的两种解决方案。都是用过减少请求的次数，来降低压力，提高性能。

区别

节流：在一定的时间内只会请求一次。

可以理解为：公交车，每个人是一次点击请求，每十分钟开一趟车，发送请求

防抖：触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。

比如在一段时间内，我一直点击按钮，以最后一次点击为准发送一次请求。

节流实现

解决思路：

使用时间戳（发生在一段时间的开始），就是在计算

当前点击的时间 - 上一次执行函数的时间 > 我设定的时间戳，就执行一次函数

缺点：第一次直接触发最后一次一段时间内无法触发

给一个场景，当我们搜索数据的时候，发起请求，没有做处理是这样的，请求肯定太过于频繁

节流函数

代码：

<body>
    <div>
        <span>节流处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
//节流函数
    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var last = 0;  //上一次结束的时间
        return function () {
            var cur = Date.now()
            console.log(cur-last)
            if (cur - last > delay) {
                fn.apply(this, arguments)  //执行函数
                last = cur //更新上一次时间
            }
        }
    }
</script>

效果：

防抖实现

解决思路：

定时器（发生在定时结束）。缺点：第一次不触发最后一次延迟触发

就是设置一个定时器，如果一直点击则清除定时器，最后一次开启定时器

防抖函数

代码：

<body>
    <div>
        <span>防抖处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
    function debounce(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var time = null;  //定时器
        return function () {
            clearTimeout(time);  //清除定时器
            let context = this;  //获取当前button上下文 如果不指定，箭头函数就会一直往外找到window
            let args = arguments;
            time = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    }
</script>

效果：

防抖升级版

第一次触发和最后一次延迟触发

代码：

    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        let time = null
        let flag=true  //标识是不是第一次触发
        return function () {
            clearTimeout(time)
            if (flag) {
                fn.apply(this, arguments)
                flag=false
            }
            time = setTimeout(() => {  //触发定时器
                fn.apply(this, arguments)
                flag=true
            }, delay)
        }
    }

效果：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

JavaScript的防抖和节流案例

目录防抖节流: 防抖:在一定的时间内只执行最后一次任务: 节流:一定的时间内只执行一次: 防抖 <button id="debounce">点我防抖!</button> $('#debounce').on('click', debounce()); function debounce() { let timer; // 闭包 return function () { clearTimeout(timer); timer = setTimeout(() =&g
关于JavaScript防抖与节流的区别与实现

目录 1.防抖 2.节流 3.总结前言: 作为前端开发中会以下两种需求 (1)搜索需求搜索的逻辑就是监听用户输入事件,等用户输入完成之后把数据发送给后端,后端返回匹配数据,前端显示数据到页面.如果只要用户输入就发请求,这样会给后端造成请求压力,需要控制请求的频率. (2)页面无限加载数据页面无限加载数据的逻辑就是监听用户用户滚动事件,在用户滚动的过程中,去请求下一页的数据来显示到页面.,那么只要滚动就去发请求,同样会造成后端请求压力,需要控制请求的频率. 以上两种看起来都是控制请求频率的问
JavaScript防抖与节流详解

目录防抖debounce 节流throttle 总结防抖debounce 定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次. 关于防抖,拿手指按压弹簧举例,用手指按压弹簧,一直按住,弹簧将不会弹起直到松开手指. 举例resize: function debounce(fn, wait){ var timer = null; return ()=>{ if(timer !== null){ clearTimeout(timer); } timer
什么是JavaScript的防抖与节流

目录一.函数防抖(debounce) 1. 什么是防抖? 二.函数节流 2.1 定时器实现 2.2 时间戳实现 2.3 时间戳+定时器一.函数防抖(debounce) 1. 什么是防抖? 函数防抖: 在频繁触发某一个事件时,一段时间内不再触发该事件后才会去调用对应的回调函数,在设定间隔时间内如果下一次事件被触发, 那么就重新开始定时器,直到事件触发结束. 规定时间内没有继续触发事件的前提下,再去调用事件处理函数: 具体如下面的例子所示: /*定义防抖函数 * func:传入一个函数,事件不再
JavaScript 防抖和节流详解

目录防抖节流总结防抖自动门感应到有人,打开门,并且开始5秒倒计时,在 5 s 内有另外一个人靠近到门,门感应到人,重新5秒倒计时当事件被触发时,设定一个延迟,若期间事件又被触发,则重新设定延迟,直到延迟结束,执行动作 (防止多次触发) web 应用上面改变页面大小的统计滚动页面位置的统计输入框连续输入的请求次数控制一开始,点击按钮,console.log('pay money') <body> <button id="btn">click&l
JS防抖节流函数的实现与使用场景

目录一.什么是函数防抖 1.为什么需要函数防抖? 2.函数防抖的要点 3.函数防抖的实现 4.函数防抖的使用场景二.什么是函数节流 1.函数节流的要点 2.函数节流的实现 3.函数节流的使用场景总结一.什么是函数防抖概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 1.为什么需要函数防抖? 前端开发过程中,有一些事件,常见的例如,onresize,scroll,mousemove ,
浅谈JavaScript节流和防抖函数

概念节流函数间隔固定的时间执行传入的方法目的是防止函数执行的频率过快,影响性能.常见于跟滚动,鼠标移动事件绑定的功能. 防抖函数对于接触过硬件的人也许更好理解,硬件按钮按下时,由于用户按住时间的长短不一,会多次触发电流的波动,加一个防抖函数就会只触发一次,防止了无意义的电流波动引起的问题. 按键防反跳(Debounce)为什么要去抖动呢?机械按键在按下时,并非按下就接触的很好,尤其是有簧片的机械开关,会在接触的瞬间反复的开合多次,直到开关状态完全改变. 应用在前端时,常见的场景是,输入框
浅谈JavaScript节流与防抖

目录节流与防抖概念: 区别节流实现节流函数防抖实现防抖函数防抖升级版总结节流与防抖概念: 区别节流实现节流函数防抖实现防抖函数防抖升级版总结节流与防抖背景:当我们频繁去请求资源.接口等其他的时候,就会造成操作Dom频繁,接口压力大等等,性能下降.比如我有时候会每次搜索会猛地敲回车,在网络不很好的时候,点击下一页按钮的时候也会一直点,可能网络不好也可能服务器性能低. 为了避免频繁触发同一事件或请求,这时候就要用到节流和防抖了. what?这是啥?当我第一次听到这
浅谈JavaScript 浏览器对象

window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:
浅谈javascript运算符——条件,逗号,赋值,()和void运算符

前面的话 javascript中运算符总共有46个,除了前面已经介绍过的算术运算符.关系运算符.位运算符.逻辑运算符之外,还有很多运算符.本文将介绍条件运算符.逗号运算符.赋值运算符.()和void运算符条件运算符条件运算符是javascript中唯一的一个三元运算符(三个操作数),有时直接称做'三元运算符'.通常这个运算符写成'?:',当然在代码中往往不会这么简写,因为这个运算符拥有三个操作数,第一个操作数在'?'之前,第二个操作数在'?'和':'之间,第三个操作数在':'之后 varia
浅谈JavaScript中面向对象的的深拷贝和浅拷贝

理解深拷贝和浅拷贝之前需要弄懂一些基础概念,内存中存储的变量类型分为值类型和引用类型. 1.值类型赋值的存储特点, 将变量内的数据全部拷贝一份, 存储给新的变量. 例如:var num = 123 :var num1=num; 表示变量中存储的数字是 123.然后将数据拷贝一份,就是将 123 拷贝一份. 那么内存中有 2 个数组;将拷贝数据赋值给 num2,其特点是在内存中有两个数据副本.这可以理解为浅拷贝. 2.引用类型的赋值. var o={name:'张三'}: var obj=o;
浅谈javascript中的constructor

constructor,构造函数,对这个名字,我们都不陌生,constructor始终指向创建当前对象的构造函数. 这里有一点需要注意的是,每个函数都有一个prototype属性,这个prototype的constructor指向这个函数,这个时候我们修改这个函数的prototype时,就发生了意外.如 function Person(name,age){ this.name = name; this.age = age; } Person.prototype.getAge = function
浅谈javascript中的Function和Arguments

javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用, 则返回null(firefox返回undefined). 注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])
浅谈javascript基础之客户端事件驱动

我们知道,面向对象发展起来后,"一夜之间",几乎所有的语言都能基于对象了,JavaScript也是基于对象的语言.用户在浏览器上的行为称作"事件",之后引发的一系列动作,比如弹窗啦,改变浏览器大小啦,验证啦,balabala,都叫做"事件驱动".当然,这次我主要介绍几个常常发生的事件. ps:对于js脚本的支持以浏览器而定!!!有的低版本的浏览器可能不支持!!! 1.单击事件(onClick) 啥叫单击事件呢?当用户单击鼠标按钮是,就会产生单击事
浅谈javascript中new操作符的原理

javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,在使用new的过程中,一共有3个对象参与了协作,构造器函数是第一个对象,原型对象是二个,新生成了一个空对象是第三个对象,最终返回的是一个空对象,但这个空对象不是真空的,而是已经含有原型的引用(__proto__) 步骤如下: (1) 创建一
浅谈Javascript中的函数、this以及原型

关于函数在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明