从防抖函数中得到的简单几点记录

一段简单的防抖函数

javascript 复制代码
    const btn = document.querySelector('#btn')
    // 设置初始化timer
    

    function debounce(fn,delay) {
        
        let timer = null
        return function(...args){
            
            
            // 如果timer有值,清除timer
            clearTimeout(timer)
            // 将计时器id给timer
            timer = setTimeout(() => {
                console.log(this); // 有this
                let that = this 
                fn.apply(that,args) 
            }, delay)
        }
    }
    // 每次点击,调用debounce
    btn.addEventListener('click',debounce(function(e) {
        console.log(e);
        console.log(this);//有this
    },1000))

1.闭包在初始化时的调用 timer

less 复制代码
    btn.addEventListener('click',debounce(fn,1000))

此时初始化执行一次debounce(),后续点击事件触发时,执行的是debounce()所返回的函数,所以timer只会在页面加载时初始化一次,后续重新触发debounce()返回的函数时不会重新初始化,这就使得每一次事件都能保留timer的值

2.this的调用

javascript 复制代码
btn.addEventListener('click',debounce(()=>{
console.log(this)//此时是window
},1000))

为什么此时是window呢?因为箭头函数的this由定义时的上下文决定,所以当箭头函数在此时定义时,相当于

javascript 复制代码
const fn = ()=>{console.log(this)}
btn.addEventListener('click',debounce(fn,1000))

这样就能看出来虽然fn被传入了debounce,但是在定义时已经决定了this为window,就算后续fn.apply(that,args) ,也改变不了this的值,所以只能把传入的函数写成普通函数,才能在后续绑定正确的this

3.debonce函数内的fn函数绑定this的问题

javascript 复制代码
    btn.addEventListener('click',debounce(funtion(){
    console.log(this) // 此时this也为window
    },1000))
    
            // 如果timer有值,清除timer
            clearTimeout(timer)
            // 将计时器id给timer
            timer = setTimeout(() => {
                console.log(this); // 有this
                let that = this 
                fn() //在全局调用,此时传入的this为window
            }, delay)

如果fn不显式绑定this,这时候在外层输出的this也为window,因为此时在debounce函数内调用了fn,因为这时候调用的fn(),并没有通过谁来调用,而是在

4.事件对象的传入传出

javascript 复制代码
    btn.addEventListener('click',debounce(function(e) {
        console.log(e);//输出事件对象
        console.log(this);//有this
    },1000))
    
        return function(...args){
            
            
            // 如果timer有值,清除timer
            clearTimeout(timer)
            // 将计时器id给timer
            timer = setTimeout(() => {
                console.log(this); // 有this
                let that = this 
                fn.apply(that,args) 
            }, delay)
        }

由于在事件函数内触发时调用的是debounce返回的函数,所以事件对象也被addEventListener方法给注入进了返回的函数,这时候我们就可以用..args接收,所接收的args则为事件对象所处的数组,再将args通过apply方法传递给我们自己写的fn回调函数,这样就可以在debounce函数外层fn的参数里,得到我们想要的事件对象e

相关推荐
小*-^-*九4 小时前
Electron vue项目 打包 exe文件
javascript·vue.js·electron
gplitems1236 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡9 小时前
React Native 中的 useCallback
javascript·react native·react.js
谢尔登11 小时前
【Nest】基本概念
javascript·node.js·express
EveryPossible12 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫12 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
林烈涛13 小时前
js判断变量是数组还是对象
开发语言·前端·javascript
Magicman15 小时前
JavaScript-事件学习
javascript
知识分享小能手15 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
aidingni88817 小时前
掌握 TCJS 游戏摄像系统:打造动态影院级体验
前端·javascript