js 函数节流和函数防抖及区别详解

文章目录

  • 1. 前言
  • 2. 函数节流
  • 3. 函数防抖
  • 4. 总结

1. 前言

浏览器中总是有一些操作非常耗费性能。所以就有了函数节流和函数防抖来提高浏览器性能。

函数节流:频繁触发一个事件时候,每隔一段时间,函数只会执行一次。

函数防抖:当触发一个时间后的n秒内,如果该事件没有被第二次触发,则执行。否,则重新开始计时。

2. 函数节流

函数节流应用场景:滚动条滚动事件dom的拖拽事件等

例:
我们都知道滚动条滚动的时候触发事件的频率极其的频繁。监控滚动条的滚动事件,滚动一次该事件可以触发上百次。很显然,有时候,我们并不需要触发如此多的次数。

函数节流,由此而生。在固定的时间内,只触发一次。

以下是封装好的节流函数,自取直接可用👇

//节流函数/*@params (入参)callback:需要节流的函数。   必传!time:节流间隔时间点(也就是多久触发一次)不传的话默认是 300 毫秒*/
//封装好的节流函数const onScroll = (callback,time = 300) => {let state = true; //触发判断条件//判断如否有函数传入if(typeof callback !== 'function'){throw '第一个入参必须是函数,需要被节流的函数'}//制作一个闭包环境return () => {if(state){callback();state = false;setTimeout(() => {state = true;},time)}}}

调用方式模板👇

在这里插入图片描述

3. 函数防抖

函数防抖应用场景:搜索框的搜索事件

例:
搜索框实际上是监控搜索框内容改变,对后台的搜索查询。

比如我们输入一个 “search” 单词,搜索框内部的onchange事件会触发六次,每输入一个字母触发一次change事件。

但是,我们真的需要发送六个请求去查询吗?完全不必要。实际上我们只需要在"search"单词输入完毕后最后查询一次即可。

函数防抖,由此而生。在规定时间内,受防抖的函数被触发第二次时候后,上一次触发销毁,下一次重新开始计时,计时完毕后触发执行。

以下是封装好的防抖函数👇,自取直接可用

//防抖函数
/*@params (入参)callback:需要节流的函数。   必传!time:防抖间隔时间点(也就是倒计时触发的缓冲时间)不传的话默认是 300 毫秒
*/
constonchange = (callback, time = 300) => {let asyncFun;//判断需要被防抖的函数是否传入if(typeof callback !== 'function'){throw '第一个入参必须是函数,需要进行防抖的函数'}//创建一个闭包环境return () => {//在上一个函数被触发前,销毁他if (asyncFun !== undefined) clearTimeout(asyncFun);//创建一个新的函数asyncFun = setTimeout(() => {callback();}, time)}
}

调用方式模板👇

在这里插入图片描述

4. 总结

不论是函数防抖还是函数节流,都是性能优化的一种手段,都是为阻止函数无意义的执行,减小dom压力,避免不必要的性能浪费。

以上是封装好的防抖,节流函数。大家可自取

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

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

相关文章

Linux中文件特殊权限suid、sgid、sticky详解

Linux中文件特殊权限suid、sgid、sticky 作用对象 suid权限作用于文件属主sgid权限作用于属组sticky权限作用于other suid 作用:让普通用户临时拥有该文件的属主的指向权限,suid权限只能应用在二进制可执行文件(命令)表示方法…

【Java笔记】第4章:深入学习循环结构

前言1. 循环的理解2. while循环3. do...while循环4. for循环5. 循环的控制语句6. 循环的嵌套结语 ↓ 上期回顾: 【Java笔记】第3章:深入学习分支结构 个人主页:C_GUIQU 归属专栏:【Java学习】 ↑ 前言 各位小伙伴大家好!上期小编…

idea错误地commit后如何处理

如果你想使用命令行重新初始化 Git 仓库,可以按照以下步骤进行: 删除该项目的.git文件夹 打开命令行终端。 切换到项目所在的目录,使用 cd 命令。 在项目目录下运行以下命令来重新初始化 Git 仓库 git init这将在当前目录下创建一个新的 Git …

Spring 事务实现方式:

Spring 事务实现方式: Spring并不直接支持事务,只有当数据库支持事务的时候,Spring才支持事务,Spring只不过简化了开发人员实现事务的开发步骤 Spring事务的实现方式有两种: 一、基于申明式事务: Service…

ubuntu 16.04.7连不上网的解决方案

首先在编辑选项卡里找到虚拟网络编辑器, 点击更改设置 点击添加网络 点击确定 选择桥接模式,自动后点击应用,最后点击确定即可。

Java——多态

1.多态简介 多态,字面意思来看就是多种形态,即当去执行某个行为,会因为对象的不同而产生不同的效果。在java语言当中就是根据对象的性质不同,对同一个方法进行调用时,得到了不同的执行结果。 在理解多态中必须时刻牢记…

文件夹变白色文件,数据恢复全攻略助你轻松找回!

在日常的电脑使用中,你是否曾遇到过文件夹突然变成了白色文件的情况?这种看似无害的变化,实则可能隐藏着数据丢失的风险。当你发现原本正常的文件夹图标变成了无关联程序的白板图标,且无法正常打开时,内心无疑是焦虑不…

车载诊断系统应用方案选型,ESP8266方案让成本降低了35%,销售数据提升47%

车载诊断系统简称OBD,这个系统随时监控发动机的运行状况和尾气后处理系统的工作状态,一旦发现有可能引起排放超标的情况,会马上发出警示。当系统出现故障时,故障灯(MIL)或检查发动机(Check Engine)警告灯亮,同时OBD系统…

Java调用cmd

Java调用cmd并执行命令 在Java中调用命令提示符(cmd)并执行命令,可以通过使用Runtime类或ProcessBuilder类来实现 代码示例 /*** 在指定目录下执行命令。** param command 要执行的命令* param path 命令执行的路径* return 如果命令成功执…

【JavaWeb】Day50.Mybatis的XML配置文件

XML配置文件规范 使用Mybatis的注解方式,主要是来完成一些简单的增删改查功能。如果需要实现复杂的SQL功能,建议使用XML来配置映射语句,也就是将SQL语句写在XML配置文件中。 在Mybatis中使用XML映射文件方式开发,需要符合一定的规…

C语言之文件操作【万字详解】

目录 一.什么是文件? 二.为什么要使用文件? 三.文件的分类 3.1.程序文件 3.2.数据文件 四.二进制文件和文本文件 五.文件的打开和关闭 (重点) 5.1流和标准流 5.1.1何为流? 5.1.2.标准流 5.2文件指针 5.3文件的打开和关…

【1425】java 外籍人员管理系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

一、源码特点 java 外籍人员管理系统是一套完善的java web信息管理系统 采用serlvetdaobean,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式 开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff…

机器学习波士顿房价

流程 数据获取导入需要的包引入文件,查看内容划分训练集和测试集调用模型查看准确率 数据获取 链接:https://pan.baidu.com/s/1deECYRPQFx8h28BvoZcbWw?pwdft5a 提取码:ft5a --来自百度网盘超级会员V1的分享导入需要的包 import pandas as pd imp…

回归预测 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量回归预测

回归预测 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量回归预测 目录 回归预测 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量回归预测预测效果基本描述程序设计参考资料 预测效果 基本描述 1.Matlab实现SA-BP模拟退火算法优化BP神经网络多变量回归预测&#xff0…

Vue3+Spring Boot3实现跨域通信解决办法

Vue3Spring Boot3实现跨域通信解决办法 1 跨域是什么?2 何为同源呢?3 解决办法3.1 全局配置3.1.1 实现CorsFilter过滤器3.1.2 实现SpringMVC配置类3.1.3 创建CorsFilterFactory工厂类返回CorsFilter对象 3.2 局部跨域3.2.1 注解配置3.2.2 手动设置响应头(局部跨域)…

几款AI语音克隆使用分享(未完成)

近期在看AI语音克隆,发现很多的语音克隆对于原始的音频或者朗读者要求过高,不知各位懂的有没有能给推荐个靠谱的。 1、剪映 语音克隆,2个字1积分,600积分6元。贵,多充并没有优惠。 声音相似度高,但是&#…

springboot+vue社区报修便民维修网站设计与实现

便民维修网站,主要的模块包括管理员;首页、个人中心、管理员管理、用户管理、维修人员管理、在线报修管理、联系客服管理、公司回访管理、基础数据管理、论坛管理、公告管理、轮播图信息,维修人员;首页、个人中心、维修人员评价管…

科研基础与工具(论文搜索)

免责申明: 本文内容只是学习笔记,不代表个人观点,希望各位看官自行甄别 参考文献 科研基础与工具(YouTube) 搜索论文 Google Scholar 谷歌学术 涵盖面太全了,都收录,就会有很多低质量的论文…

基于SpringBoot民宿入住管理系统

目录 项目介绍 图片展示 运行环境 获取方式 项目介绍 权限划分:用户和管理员 用户: 具有登录、注册、退出登录的功能 首页:可以查看民宿房间总数,保洁人数,当前入住人数,合计总入住人数,以…

【架构】Elasticsearch+Logstash+Kibana架构

目录 什么是ELK ELK架构的应用场景 什么是ELK ELK是由Elasticsearch、Logstash和Kibana三个开源项目组成的技术栈,广泛用于搜索、日志管理和日志分析。这三个组件协同工作,提供了一个强大的方法来收集、存储、搜索和可视化日志数据和其他时间序列数据…