js事件的防抖和节流

短命女 2022-12-28 06:11 285阅读 0赞

**1.事件防抖**

在函数频繁触发时在设置特定时间段内只调用最后一次，频繁调用时只要在时间段内，就会取消之前的调用。

如：input实时搜索，接口触发次数频繁，但是没有必要。可以等输入停止一定时间内再去调用。

代码实现

// 防抖 最后一次请求延迟 一定时间触发
    	function debounce(fn, delay = 500){
    		let t = null;
    		return function(e){
    			if(t){
    				clearInterval(t)
    			}
    			t = setTimeout((e)=>{
    				fn.call(this,e)
    				t = null;
    			},delay)
    			
    		}
    	}

**2.事件节流**

在函数频繁触发时在设置特定时间段内只调用一次，从而达到多次变成少次，从而缓解浏览器或者服务器压力，比不影响功能。

如：window.resize 和 mousemove 触发时频率特别高，可以在一定时间内调用一次，就能实现需求。

代码实现

//节流 规定时间内才会执行一次
        function throttle1(fn,during) {
            let start =  0
            return function(e){
                const end = Date.now() 
                if(end - start > during){
                    start = Date.now()
                    fn.call(this,e)
                }
            }  
        }
    	
    	function throttle2(fn,during) {
            let t = null
            return function(e){
    			if(!t){
    				t = setTimeout(()=>{
    					fn.call(this,e)
    					t = null
    				},during)
    			}
            }  
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 防抖、节流

突发奇想，在触发事件的时候，一些会频繁触发的事件会不会造成资源的浪费或者大量的计算造成页面卡顿，比如onresize,onscroll,onmousemove等事件。然后就

川长思鸟来/ 2023年10月11日 12:27/ 0 赞/ 158 阅读

相关 js防抖和节流

防抖和节流一般应用于高频事件频繁触发的场景，如窗口大小改变，下拉加载，搜索等，可有效避免事件处理函数被频繁调用造成性能差的问题。一、防抖和节流区别防抖：指定时间内只

客官°小女子只卖身不卖艺/ 2023年06月30日 05:24/ 0 赞/ 95 阅读

相关 js函数防抖节流

一、什么是函数防抖概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间

柔光的暖阳◎/ 2023年02月20日 05:58/ 0 赞/ 36 阅读

相关 js 防抖和节流

防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 // 防抖函数 const debounce = (fn, delay) => \{

系统管理员/ 2023年02月18日 05:25/ 0 赞/ 38 阅读

相关 vue js防抖节流

防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次节流

柔光的暖阳◎/ 2023年01月08日 08:04/ 0 赞/ 290 阅读

相关 JS函数的防抖和节流

为什么要有防抖和节流？为了解决当用户点击请求过快的时候，服务器来不及相应，造成延迟卡死的情况；防抖或节流：限制函数的执行次数；防抖防抖：函数在n

太过爱你忘了你带给我的痛/ 2022年12月28日 14:13/ 0 赞/ 269 阅读

相关 js事件的防抖和节流

1.事件防抖在函数频繁触发时在设置特定时间段内只调用最后一次，频繁调用时只要在时间段内，就会取消之前的调用。如：input实时搜索，接口触发次数频繁，但是没有必要

短命女/ 2022年12月28日 06:11/ 0 赞/ 286 阅读

相关 js的防抖和节流

写这篇文章主要用于自己以后查漏防抖和节流的共同点：限制函数的执行频率，以优化函数触发频率过高而导致响应速度跟不上触发频率，出现延迟、假死、卡顿现象区别：函数节流不管事件

Dear 丶/ 2022年12月18日 05:53/ 0 赞/ 258 阅读

相关 JS中的防抖和节流

文章目录为什么要用到防抖和节流防抖节流的定义及区别常见的应用场景各自的函数实现为什么要用到防抖和节流

墨蓝/ 2022年11月27日 08:51/ 0 赞/ 238 阅读

相关 js中的防抖和节流

1、函数防抖（debounce） > 当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间 > 防抖的意思是无论你触发多少次函数，只会触发最

灰太狼/ 2021年09月18日 03:32/ 0 赞/ 386 阅读