js防抖函数的使用

function debounce(func, delay) {
let timer
//当前的this是指向window
return function (...args) {
//当前的this是指向dom元素
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}

例:<div id="test">点击</div>
实现隔3s执行一次的操作:
document.getElementById('test').addEventListener('click', debounce(function() {
console.log('执行完成之后的动作')
}, 3000))

记:事件回调函数里的this指向触发当前事件的DOM元素

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数节流场景 例如:实现一个原生的拖拽功能(如果不用H5 Drag和Drop API),我们就需要一路监听mous...
    凡凡的小web阅读 809评论 0 0
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,103评论 1 10
  • 一、前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。 ...
    我讲你思阅读 613评论 0 1
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,053评论 0 2
  • 杨慧霞 洛阳 焦点讲师班二期 坚持分享第1129天 “舍得“解释为愿意割弃,不吝啬。“舍得,舍得,有舍才...
    yhx慧心慧语阅读 235评论 0 0