前端---闭包【防抖以及节流】----面试高频!

1.什么闭包

释放闭包

从以上看出:一般 函数调用一次会把内部的数据进行清除--但是这种操作却可以一起保留局部作用域的数据

// 优点:1、可以读取函数内部的变量 2、让这些变量始中存在局部作用域当中

2.闭包产生的两种业务场景:防抖、节流

2.1防抖

举例:写个按钮--写个点击事件

你狂点登录---login函数一直被执行!--这样子容易崩溃!

效果:点击登录--等待3s--实现登录

2.1节流【好比王者荣耀的冷却cd】

参考博主:前端性能优化之防抖&节流_前端防抖节流-CSDN博客

节流n 秒内只执行一次事件,即使n 秒内事件重复触发,也只有一次生效

应用场景:浏览器滚动事件、窗口大小的改变

举例:监听window的窗口大小

我只要不断拉窗口--会一直触发resize该事件!!--会造成大量计算

这么办!【思路就是两次触发的时间间隔到了指定时间就执行--并且记录第二次触发的时间,否则不执行】

换句话说:【

1:多次触发窗口---多次执行回调--多次获取当前时间 ---只有满足 延迟(当前时间--上次触发的事件>=延迟时间 )--fn就会被执行---记录当前时间时间作为上次触发时间节点

2:多次触发窗口---多次执行回调--多次获取当前时间 ---不满足 延迟(当前时间--上次触发的事件>=延迟时间 )--fn就不会被执行----直到你触发窗口的那次的当前时间刚好满足延长时间】

完善代码

javascript 复制代码
   /* 节流 */
    // 浏览器滚动事件、窗口大小的改变

    function thorttle(/* 需要进行节流处理的函数 */ fn, /* 延迟的时间 */ time) {
        // 记录上一次事件执行的时间
        let lastTime = 0
        let i = 1
        return function () {
            i++
            // 获取当前时间
            const nowTime = new Date().getTime()
            // cd剩余时间
            const remainTime = nowTime - lastTime
            if (remainTime - time >= 0) {
                fn()
                lastTime = nowTime
                console.log(i, 'i');
            }
        }
    }

    function _resize() {
        console.log("节流")
    }

    window.addEventListener("resize", thorttle(_resize, 2000))
相关推荐
爱分享的程序员27 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘33 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出34 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的34 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解37 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵40 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im41 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man41 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构