js-防抖

简介: 在浏览器的各种事件中,有一些容易频繁触发的事件,比如scroll、resize、鼠标事件(比如 mousemove、mouseover)、键盘事件(keyup、keydown )等。频繁触发回调导致大量的计算会引发页面抖动甚至卡顿,影响浏览器性能。防抖和节流就是控制事件触发的频率的两种手段。
  1. 在浏览器的各种事件中,有一些容易频繁触发的事件,比如scroll、resize、鼠标事件(比如 mousemove、mouseover)、键盘事件(keyup、keydown )等。频繁触发回调导致大量的计算会引发页面抖动甚至卡顿,影响浏览器性能。防抖和节流就是控制事件触发的频率的两种手段。

    防抖的中心思想是:在某段时间内,不管你触发了多少次回调,我都只执行最后一次。

// fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间
function debounce(fn, delay) {
   
    // 定时器
    let timer = null;
    // 将debounce处理结果当作函数返回
    return function () {
   
        // 保留调用时的this上下文
        let context = this
        // 保留调用时传入的参数
        let args = arguments
        // 每次事件被触发时,都去清除之前的旧定时器
        if(timer) {
   
            clearTimeout(timer)
        }
        // 设立新定时器
        timer = setTimeout(function () {
   
            fn.apply(context, args)
        }, delay)
    }
}
// 用debounce来包装scroll的回调
window.onscroll = debounce(() => {
   
    console.log('触发了滚动事件');
},1000)
相关文章
|
7天前
|
JavaScript
JS中防抖和节流的区别是什么
JS中防抖和节流的区别是什么
25 0
|
7天前
|
JavaScript 前端开发 UED
【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
|
7天前
|
JavaScript 前端开发 UED
js的防抖节流
js的防抖节流
12 1
|
7天前
|
测试技术
js_防抖与节流(闭包的使用)
js_防抖与节流(闭包的使用)
19 0
|
7天前
|
JavaScript
|
7天前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
41 0
|
7天前
|
JavaScript 前端开发
js的节流和防抖
js的节流和防抖
19 0
|
7天前
|
JavaScript 前端开发 UED
|
7天前
|
JavaScript 前端开发 UED
JavaScript:节流&防抖
JavaScript:节流&防抖
31 1
|
7天前
|
JavaScript 前端开发 搜索推荐
面试官:请说说JS中的防抖和节流
面试官:请说说JS中的防抖和节流