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

news2024/9/23 17:11:58

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Mysql教程(0):学习框架

1、Mysql简介 MySQL 是一个开放源代码的、免费的关系型数据库管理系统。在 Web 开发领域,MySQL 是最流行、使用最广泛的关系数据库。MySql 分为社区版和商业版,社区版完全免费,并且几乎能满足全部的使用场景。由于 MySQL 是开源的&#xff0…

【Windows】 IDimager Photo Supreme 2024(图片管理软件)安装教程

软件介绍 IDimager Photo Supreme 2024是一款专业的图片管理软件,旨在帮助用户有效地组织、管理和浏览他们的照片收藏。以下是该软件的一些主要特点和功能: 图片管理:Photo Supreme提供强大的图片管理功能,可以帮助用户轻松地整理…

笔记89:LeetCode_135_分发糖果

前言: 注:代码随想录中没有很清楚的提起想出方法的思路,只是给出了解决这个问题的大致思路和代码;下面我将介绍一下我的思考过程,并贴出实现代码; a a a a 思考过程: 思路1:为了…

Win32 API

个人主页:星纭-CSDN博客 系列文章专栏 : C语言 踏上取经路,比抵达灵山更重要!一起努力一起进步! 一.Win32 API 1.Win32 API介绍 Windows这个多作业系统除了协调应⽤程序的执⾏、分配内存、管理资源之外,它同时也是…

【408真题】2009-15

“接”是针对题目进行必要的分析,比较简略; “化”是对题目中所涉及到的知识点进行详细解释; “发”是对此题型的解题套路总结,并结合历年真题或者典型例题进行运用。 涉及到的知识全部来源于王道各科教材(2025版&…

nginx服务器执行的过程

一:打包 1.打包前的分析 文件路径下npm run preview -- --report 生成打包之后的内容 2.解决有些内容体积过大的问题 1.删除有些不使用但是占用较多的,将main.js上import删除,打包时不会有 2.不能删除但是内容较大的 vue.config.js文件夹下 externals: { vue: Vue,…

mysql5.5版本安装过程

mysql是关系型数据库的管理系统 将安装包放在 c盘根目录 名称为mysql 在该路径下cmd进入命令执行窗口 出现此页面说明安装成功 需要修改配置文件内容 将my-medium.ini 复制粘贴并改名为 my.ini 并添加如下内容 改好之后在mysql目录下cmd进入命令执行窗口 切换到cd bin …

[集群聊天服务器]----(一)项目简介

在最近的学习中,实现了基于muduo网络库的集群聊天服务器,在此做一个剖析以及相关内容的梳理介绍,希望可以帮助到大家。 这一篇,先来简单介绍一下这个项目。 源码地址 Cluster_Chat_System-项目 项目技术特点 使用C开发并基于 …

ASP+ACCESS公司门户网站建设

【摘 要】随着计算机科学的发展,数据库技术在Internet中的应用越来越广泛,为广大网络用户提供了更加周到和人性化的服务。本文讲解了一个公司的网站的建设,它基于数据关联规则的公司个性化页面及动态数据生成案例,在网页方面&…

Linux--线程的认识(一)

线程的概念 线程(Thread)是操作系统中进行程序执行的最小单位,也是程序调度和分派的基本单位。它通常被包含在进程之中,是进程中的实际运作单位。一个线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线…

Django与前端框架协作开发实战:高效构建现代Web应用

title: Django与前端框架协作开发实战:高效构建现代Web应用 date: 2024/5/22 20:07:47 updated: 2024/5/22 20:07:47 categories: 后端开发 tags: DjangoREST前端框架SSR渲染SPA路由SEO优化组件库集成状态管理 第1章:简介 1.1 Django简介 Django是一…

hive3从入门到精通(二)

第15章:Hive SQL Join连接操作 15-1.Hive Join语法规则 join分类 在Hive中,当下版本3.1.2总共支持6种join语法。分别是: inner join(内连接)left join(左连接)right join(右连接)…

04.爬虫---Session和Cookie

04.Session和Cookie 1.Session2.Cookie3.详细对比4.Cookie属性结构5.一些误区 Session和Cookie是Web开发中用于用户状态管理的两种常见技术。理解它们的区别对于开发安全的Web应用至关重要。 1.Session Session代表服务器与客户端的一次会话过程。服务器端存储了Session对象&…

智能合作:多AI协同助力传统工作流

背景介绍 红杉资本2024 AI AGENT大会上吴恩达再次介绍了AI四大设计模式即: 反思(Reflection);工具使用(Tool use);规划(Planning);多智能体协作(Multi-agent collaboration)&#…

spring模块(三)Spring AOP(2)使用

一、demo 1、spring项目 &#xff08;1&#xff09;pom <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-core</artifactId><version>4.3.13.RELEASE</version></dependency>&l…

数据分析工程师——什么是数据分析?

数据分析工程师 对于目前就业市场上的技术岗位,除了开发、测试、运维等常见职位之外,数据类岗位也越来越成为热门的求职方向。本文将重点介绍 数据分析 这一新兴岗位。 看到「数据分析」这几个字,也许大家的第一印象一样,觉得要做的工作似乎并不难,有大量数据后根据业务…

Redis分布式存储方案

一、Redis分布式存储方案 1、哈希取余分区 ①、原理 哈希计算&#xff1a;首先&#xff0c;对每个键&#xff08;key&#xff09;进行哈希计算&#xff0c;得到一个整数哈希值&#xff08;hash value&#xff09;。取余操作&#xff1a;将这个哈希值对服务器数量进行取余操作…

AI播客下载:The Logan Bartlett Show Podcast(AI创业投资主题)

Logan Bartlett Show Podcast是一个播客&#xff0c;主持人Logan Bartlett与科技界的领导者以及投资者进行对话&#xff0c;讨论他们在运营或投资企业中学到的经验教训&#xff0c;主要集中在科技创投领域。 Logan Bartlett 是 Redpoint Ventures 的投资人&#xff0c;并且在该…

AI视频智能分析引领智慧园区升级:EasyCVR智慧园区视频管理方案

一、系统概述与需求 随着信息技术的不断发展&#xff0c;智慧园区作为城市现代化的重要组成部分&#xff0c;对安全监控、智能化管理提出了更高的要求。智慧园区视频智能管理系统作为实现园区智能化管理的重要手段&#xff0c;通过对园区内各关键节点的视频监控和智能分析&…

八、函数和数组

8.1 函数 函数几乎是学习所有的程序设计语言时都必须过的一关。对于学习过其他的程序语言的用户来说&#xff0c;函数可能并不陌生。但是Shell中的函数与其他的程序设计语言的函数有许多不同之处。 8.1.1什么是函数 通俗地讲&#xff0c;所谓函数就是将一组功能相对独立的代码…