js的防抖和节流详细介绍

Love The Way You Lie 2022-01-26 01:15 127阅读 0赞

###### js的防抖和节流主要用在监听输入框、监听页面滚动等一些高频触发事件，让这些事件既能保持高频触发，但又不浪费性能。 ######

###### 首先介绍防抖（debounce）定义一个防抖函数，可直接复制使用，注意使用方法。 ######

var debounce=function(fn, wait){ 
    	var timer = null;
        return function(){ 
            if(timer!== null)   clearTimeout(timeout);        
            timer= setTimeout(fn, wait);    
        }
    };
    function yourfunc(){ 
    	console.log(Math.random())
    };
    window.addEventListener('scroll',debounce(yourfunc,1000));

###### 上面相当于在监听页面滚动的时候，每隔1秒执行一次你的函数 ######

###### 然后是节流（throttle ）定义一个节流函数，可直接复制使用，注意使用方法。 ######

var throttle = function(func, delay) {             
    　　var timer = null;            
        return function() {                 
            var context = this;               
            var args = arguments;                
            if (!timer) { 
                timer = setTimeout(function() {                         
                    func.apply(context, args);                        
                    timer = null;                    
                }, delay);          
            }            
        }      
    }  
    function yourfunc() { 
    　　console.log(Math.random());        
    }        
    window.addEventListener('scroll', throttle(yourfunc, 1000));

###### 上面相当于在监听页面滚动的时候，1秒内只执行一次你的函数 ######

##### 两种方式区别在于： #####

##### 防抖是每1秒执行一次函数（秒数自己控制） #####

##### 节流是一秒内只执行一次函数（秒数自己控制） #####

##### 根据需求自行选择使用 #####

如有错误，请指正

发表评论取消回复

表情：

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

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

相关阅读

相关 JS 防抖技术和节流技术

在监听窗口进行 resize、scroll 等调用函数频率很高的操作时，如果每次都做相应的处理，则会加重浏览器的负担，导致渲染延迟，甚至是假死，这样会给用户带来非常糟糕的体验。

缺乏、安全感/ 2023年08月17日 16:07/ 0 赞/ 82 阅读

相关节流和防抖

事件的触发权很多时候都属于用户，有些情况下会产生问题：向后台发送数据，用户频繁触发，对服务器造成压力一些浏览器事件:window.onresize、windo

忘是亡心i/ 2022年11月29日 11:22/ 0 赞/ 424 阅读

相关 JS编写防抖和节流函数

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行

蔚落/ 2022年11月21日 01:09/ 0 赞/ 239 阅读

相关节流防抖

/ fn [function] 需要防抖的函数 delay [number] 毫秒，防抖期限值 / function debounce(fn,delay){

今天药忘吃喽~/ 2022年11月04日 12:24/ 0 赞/ 245 阅读

相关节流和防抖

节流和防抖 > 作用：均是为节约计算机资源而生，也就是归属于优化方面 > 原理：均使用`setTimeout`来存放待执行的函数，很方便的利用它的延时机制来确定合适的

以你之姓@/ 2022年05月11日 10:42/ 0 赞/ 277 阅读

相关 js的防抖和节流详细介绍

js的防抖和节流主要用在监听输入框、监听页面滚动等一些高频触发事件，让这些事件既能保持高频触发，但又不浪费性能。首先介绍防抖（debounce）定义一个防抖函数，可直

Love The Way You Lie/ 2022年01月26日 01:15/ 0 赞/ 128 阅读

相关节流和防抖

在前端开发过程中，我们经常会遇到持续性触发的事件，如：点击事件、滚动事件以及拖拽等，但有时我们并不想让该事件如此频繁的执行时该怎么办呢？这时我们就要用到节流和防抖了，它们能大大

刺骨的言语ヽ痛彻心扉/ 2021年11月17日 14:42/ 0 赞/ 379 阅读

相关节流和防抖

节流和防抖其实没那么高大上节流（throttle）和防抖（debounce）是 JS 中的两个概念，听上去挺高大上的，很多同学也望而却步了，加上这俩概念还很类似，所以也

野性酷女/ 2021年09月18日 02:26/ 0 赞/ 458 阅读

相关 js 性能优化节流防抖

1.防抖使用场景 1.监听一个输入框文字变化后触发chang事件 2.直接用keyup事件则会频繁触发change事件 3

向右看齐/ 2021年08月27日 17:20/ 0 赞/ 404 阅读

相关 js 的节流与防抖

函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。

朱雀/ 2021年04月16日 13:54/ 0 赞/ 578 阅读