高效率Js防抖和节流

简介: 防抖:函数 fn 在不再触发事件后,过 delay 秒才会执行,在出发期间从来没有执行过

防抖:

函数 fn 在不再触发事件后,过 delay 秒才会执行,在出发期间从来没有执行过

let debounce =  function( fn,delay) {
        let timerId;
        return function (...args) {
            if (timerId) {
                clearTimeout(timerId);
            }
            timerId = setTimeout(() => {
                fn(...args);
                timerId = null;
            }, delay);
        }
    }

节流:

fn函数在高频触发事件期间每隔delay秒执行一次,不触发事件后则则不执行

//时间戳
var throttle = function(func, delay) {            
  var prev = Date.now();            
  return function() {                
    var context = this;                
    var args = arguments;                
    var now = Date.now();                
    if (now - prev >= delay) {                    
      func.apply(context, args);                    
      prev = Date.now();                
    }            
  }        
}


//定时器
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);                
        }            
    }        
}  

总结


函数防抖:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。


函数节流:使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。


目录
相关文章
|
2月前
|
JavaScript
JS封装节流函数
JS封装节流函数
33 0
|
28天前
|
前端开发 JavaScript Java
【JavaScript】JavaScript 防抖与节流:以游戏智慧解锁实战奥秘
【JavaScript】JavaScript 防抖与节流:以游戏智慧解锁实战奥秘
27 3
|
1月前
|
JavaScript 前端开发 UED
深入理解JavaScript中的节流与防抖技术
理解并合理运用节流与防抖技术,可以帮助我们优化事件处理函数的执行频率,从而提升应用的性能和用户体验。这两种技术通过减少不必要的计算和DOM操作,使得Web应用程序能够更加流畅地运行。 通过掌握防抖和节流的实现原理及应用场景,开发者可以更加灵活地编写高效且性能优化的代码,对于面对高频事件处理时尤其重要。在开发中合理选择使用防抖或节流,将直接影响到应用的响应性和效率。
17 1
|
2月前
|
JavaScript 前端开发 UED
js的防抖节流
js的防抖节流
20 1
|
2月前
|
JavaScript 前端开发 UED
js的节流
js的节流
18 0
|
2月前
|
测试技术
js_防抖与节流(闭包的使用)
js_防抖与节流(闭包的使用)
34 0
|
2月前
|
JavaScript 前端开发
【JavaScript】面试手撕节流
上篇我们讲了防抖,这篇我们就谈谈防抖的好兄弟 -- 节流。这里在老生常谈般的提一下他们两者之间的区别,顺带给读者巩固下。
61 3
|
2月前
|
JavaScript
|
2月前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
49 0
|
2月前
|
JavaScript 前端开发
js的节流和防抖
js的节流和防抖
27 0