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

一段简单的防抖函数

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

相关推荐
前端小趴菜055 小时前
React-React.memo-props比较机制
前端·javascript·react.js
RadiumAg8 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo8 小时前
ES6笔记2
开发语言·前端·javascript
yanlele8 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴9 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
初遇你时动了情10 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz10 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
ohMyGod_12312 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
@大迁世界12 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
一瓣橙子12 小时前
7.7日 实验03-Spark批处理开发(2)
开发语言·javascript·ajax