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

 1.什么闭包

释放闭包

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

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

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

2.1防抖

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

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

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

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

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

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

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

举例:监听window的窗口大小

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

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

换句话说:【

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

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

完善代码

   /* 节流 */
    // 浏览器滚动事件、窗口大小的改变

    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))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/646000.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PLC_博图系列☞R_TRIG:检测信号上升沿

PLC_博图系列☞R_TRIG:检测信号上升沿 文章目录 PLC_博图系列☞R_TRIG:检测信号上升沿背景介绍R_TRIG: 检测信号上升沿说明参数示例 关键字: PLC、 西门子、 博图、 Siemens 、 R_TRIG 背景介绍 这是一篇关于PLC编程的文章&a…

【微服务】springboot 构建镜像多种模式使用详解

目录 一、前言 二、微服务常用的镜像构建方案 3.1 使用Dockerfile 3.2 使用docker plugin插件 3.3 使用docker compose 编排文件 三、环境准备 3.1 服务器 3.2 安装JDK环境 3.2.1 创建目录 3.2.2 下载安装包 3.2.3 配置环境变量 2.2.4 查看java版本 3.3 安装maven …

Neural Networks and Deep Learning环境搭建

1.进入Anaconda prompt 2.创建虚拟环境 (1)最简单的创建 python 虚拟环境的命令是: conda create -n your_env_name # your_env_name 为你虚拟环境名(2)我在这里创建一个名为:deep_study的 python2.7版…

Outlook关闭垃圾邮件过滤的方法

Outlook关闭垃圾邮件过滤的方法 | LogDicthttps://www.logdict.com/archives/outlookguan-bi-la-ji-you-jian-guo-lu-de-fang-fa

解决vite打包只生成了一个css和js文件问题

文章目录 1. 打包遇到的问题2. 问题原因及修改3. 调整后再次打包🆗 1. 打包遇到的问题 今天整了一个项目,试了下打包,发下打包后只生成了一个css文件,和一个js文件, 这样肯定是不行的,因为这样这个文件的包…

CSS常用设置

对于前端开发人员来说&#xff0c;最难的一步莫过于CSS&#xff08;是否同感&#xff1f;&#xff09; 在最近的项目中学习了一些CSS设置&#xff0c;特意来分享~ 容器内容水平垂直居中 先准备个容器和内容&#xff08;一个盒子&#xff09; <div id"app">…

Elasticsearch集群许可证过期问题解决方法汇总

最近在使用elasticsearch的过程中,使用elastic-head进行可视化展示集群的状态和信息,从2024年5月18日突然elastic-head无法现在集群的状态界面啦,elasticsearch集群状态是正常,命令如下: curl -X GET "localhost:9200/_cluster/health?pretty" 在google页面上通过…

JavaWeb-JS

目录 学习重点 什么是 JavaScript? Web标准 JS的引入方式 JS的基本语法 JS的函数 JS的对象 JS事件监听 学习重点 js 引入方式 js 基础语法 js 函数 js 对象 js 事件监听 什么是 JavaScript? Web标准 Web 标准也称为网页标准 &#xff0c;由一系列的标准组成&#xff0…

Java面试题--JVM大厂篇(1-10)

引言&#xff1a; 在这个信息时代&#xff0c;对于准备进入大厂工作的朋友们来说&#xff0c;对于JVM&#xff08;Java虚拟机&#xff09;的掌握是面试中的一项重要内容。下面是一些精选的JVM面试题&#xff0c;希望对大家能有所帮助。 正文&#xff1a; 1. JVM有哪几种垃圾收…

python-情报加密副本

【问题描述】某情报机构采用公用电话传递数据&#xff0c;数据是5位的整数&#xff0c;在传递过程中是加密的。加密规则如下&#xff1a;每位数字都加上8,然后用和除以7的余数代替该数字&#xff0c;再将第1位和第5位交换&#xff0c;第2位和第4位交换。请编写程序&#xff0c;…

hping 一键开始简单的DOS攻击(KALI工具系列四)

目录 1、KALI LINUX简介 2、hping工具简介 3、在KALI中使用hping 3.1 目标主机IP&#xff08;win&#xff09; 3.2 KALI的IP 4、命令示例 4.1 指定端口发送TCP文件 4.2 端口连续性ping 4.3 用ICMP去ping 4.4 用ACK去ping该ip 4.5 用UDP去ping该ip 5、操作实例…

js 生成二维码

第一种&#xff0c;需要先下载包 npm install qrcode <template><div><h2>二维码</h2><img :src"qrCodeImage" alt""></div> </template><script> import QRCode from qrcode export default {dat…

Spring:面向切面(AOP)

1. 代理模式 二十三种设计模式中的一种&#xff0c;属于结构型模式。它的作用就是通过提供一个代理类&#xff0c;让我们在调用目标方法的时候&#xff0c;不再是直接对目标方法进行调用&#xff0c;而是通过代理类**间接**调用。让不属于目标方法核心逻辑的代码从目标方法中剥…

Day23:Leetcode:530.二叉搜索树的最小绝对差 + 501.二叉搜索树中的众数 + 236. 二叉树的最近公共祖先

LeetCode&#xff1a;530.二叉搜索树的最小绝对差 问题描述 解决方案&#xff1a; 1.思路 中序遍历 2.代码实现 class Solution {int pre;int ans;public int getMinimumDifference(TreeNode root) {ans Integer.MAX_VALUE;pre -1;dfs(root);return ans;}public void d…

ic基础|时钟篇05:芯片中buffer到底是干嘛的?一文带你了解buffer的作用

大家好&#xff0c;我是数字小熊饼干&#xff0c;一个练习时长两年半的ic打工人。我在两年前通过自学跨行社招加入了IC行业。现在我打算将这两年的工作经验和当初面试时最常问的一些问题进行总结&#xff0c;并通过汇总成文章的形式进行输出&#xff0c;相信无论你是在职的还是…

MATLAB学习:频谱图的绘制

1.概述 时域信号经FFT变换后得到了频谱,在作图时还必须设置正确的频率刻度,这样才能从图中得到正确的结果。 2.案例分析 下面透过一个简单的例子来分析频谱图中频率刻度(横坐标)的设置的重要性。一余弦信号,信号频率为30Hz,采样频率100Hz,信号长128,在FFT后做谱图&#xff0…

【STM32单片机】----实现LED灯闪烁实战

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

1.6 什么是程序-编译与调试

目录 1 程序的作用 2 新建项目及编译运行 2.1 新建项目 2.2 HelloWorld 程序说明 2.3 printf 打印输出 2.4 注释 3 程序的编译过程及项目位置 4 断点及调试窗口设置 5 学习C语言后的境界 1 程序的作用 如下图所示&#xff0c;我们编写了一个可以做加法的程序&#xf…

【机器学习-23】关联规则(Apriori)算法:介绍、应用与实现

在现代数据分析中&#xff0c;经常需要从大规模数据集中挖掘有用的信息。关联规则挖掘是一种强大的技术&#xff0c;可以揭示数据中的隐藏关系和规律。本文将介绍如何使用Python进行关联规则挖掘&#xff0c;以帮助您发现数据中的有趣模式。 一、引言 1. 简要介绍关联规则学习…

Python编程之调试魔法与列表逆转之谜

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、调试魔法&#xff1a;揭开Python编程的神秘面纱 代码调试实例 二、列表逆转之谜&#…