#yyds干货盘点# 【js学习笔记三十四】手写防抖

简介: #yyds干货盘点# 【js学习笔记三十四】手写防抖

前言


我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语


手写防抖

图片.png

代码部分

function geyao(fn, delay) {
        //timer是一个定时器
        let timer = null
        // 返回一个闭包函数,用闭包保存timer确保其不会销毁,
重复点击会清理上一次的定时器
        let arg = arguments
        return function () {
          // 调用一次就清除上一次的定时器
          clearTimeout(timer)
          // 开启这一次的定时器
          timer = setTimeout(() => {
            // 若不改变this指向,则会指向fn定义环境
            fn.apply(this, arg)
          }, delay)
        }
      }

总结



简单的说,当一个函数连续触发,只执行最后一次。

相关文章
|
8天前
|
前端开发 JavaScript Java
【JavaScript】JavaScript 防抖与节流:以游戏智慧解锁实战奥秘
【JavaScript】JavaScript 防抖与节流:以游戏智慧解锁实战奥秘
15 3
|
13天前
|
JavaScript 前端开发 UED
深入理解JavaScript中的节流与防抖技术
理解并合理运用节流与防抖技术,可以帮助我们优化事件处理函数的执行频率,从而提升应用的性能和用户体验。这两种技术通过减少不必要的计算和DOM操作,使得Web应用程序能够更加流畅地运行。 通过掌握防抖和节流的实现原理及应用场景,开发者可以更加灵活地编写高效且性能优化的代码,对于面对高频事件处理时尤其重要。在开发中合理选择使用防抖或节流,将直接影响到应用的响应性和效率。
13 1
|
1月前
|
JavaScript 前端开发 UED
js的防抖节流
js的防抖节流
19 1
|
1月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
28 0
webgl学习笔记3_javascript的HTML DOM
|
1月前
|
测试技术
js_防抖与节流(闭包的使用)
js_防抖与节流(闭包的使用)
31 0
|
1月前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
23 0
|
1月前
|
JavaScript
|
1月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
1月前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
48 0
|
1月前
|
JavaScript 前端开发
js的节流和防抖
js的节流和防抖
22 0