当前位置: 首页 > news >正文

js知识点1:防抖节流

js知识点1:防抖节流

  • 防抖
  • 节流

防抖节流,本质上是优化高频率执行代码的一种手段
定义:
防抖: n 秒后再执行该事件,若在 n 秒内被重复触发,则重新计时
节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效

一个经典的比喻:
想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应
假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒,不考虑容量限制

电梯第一个人进来后,15秒后准时运送一次,这是节流

电梯里第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖

首选,给出总结:

相同点
都可以通过使用 setTimeout 实现
降低回调执行频率。节省计算资源

不同点

函数防抖,在一段连续操作结束后,处理回调,利用clearTimeout和 setTimeout实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能
函数防抖关注一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次

函数节流,不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数
防抖只是在最后一次事件后才触发一次函数。

应用场景

例如,都设置时间频率为500ms,在2秒时间内,频繁触发函数,节流,每隔 500ms 就执行一次。防抖,则不管调动多少次方法,在2s后,只会执行一次

防抖应用场景:

搜索框输入查询、手机号、邮箱验证输入检测。只需用户最后一次输入完,再发送请求
窗口大小resize。只需窗口调整完成后,计算窗口大小,防止重复渲染。

节流应用场景:

监听滚动事件判断是否到页面底部自动加载更多
搜索联想功能
DOM元素的拖拽功能实现
射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
防止高频点击提交,防止表单重复提交;

防抖

以输入框查询功能为例:
在这里插入图片描述在这里插入图片描述

//html:
<span>查询:</span>
<input type="text" id="inputVal">//js:
//未处理
$(document).on("keyup","#inputVal",function(){//执行内容console.log($("#inputVal").val());
})//防抖处理
var timer=null;
$(document).on("keyup","#inputVal",function(){if(timer){//在执行中 (如果之前的定时器还存在,则清除)clearTimeout(timer);}//500ms后再触发timer=setTimeout(function(){//执行内容console.log($("#inputVal").val());timer=null;//本次查询完成,定时器清除,以便下次查询处理}, 500);
})

防抖函数封装:

//fn为事件处理函数 delay延迟时间
function debounce(fn, delay) {var timer = null;return function () {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {fn.apply(this, arguments); //this和参数timer = null;}, delay);};
}

节流

以滚动页面到底部为例:
添加节流处理后的效果:scroll事件中的代码,会在事件触发时,每隔500ms触发一次。
在这里插入图片描述
在这里插入图片描述

//未处理var i=0;window.onscroll=function(){console.log(++i);var scrollTop=document.documentElement.scrollTop;var clientHeight=document.documentElement.clientHeight;var scrollHeight=document.documentElement.scrollHeight;var scrollHeight=document.documentElement.scrollHeight;if(scrollTop+clientHeight>=scrollHeight){console.log('到底了!');}}//防抖处理
var i=0;
var timer=null;
window.onscroll=function(){if(timer){return;}timer=setTimeout(function(){console.log(++i);var scrollTop=document.documentElement.scrollTop;var clientHeight=document.documentElement.clientHeight;var scrollHeight=document.documentElement.scrollHeight;var scrollHeight=document.documentElement.scrollHeight;if(scrollTop+clientHeight>=scrollHeight){console.log('到底了!');}timer=null;},500)
}

节流函数封装:

//节流封装function throttle(fn, delay) {var timer = null;return function () {if (timer) {return;}timer = setTimeout(() => {fn.apply(this, arguments);//把this和参数传递过去timer = null;}, delay);};}

参考:
https://baijiahao.baidu.com/s?id=1752769417074179461&wfr=spider&for=pc
https://baijiahao.baidu.com/s?id=1738733742087151995&wfr=spider&for=pc

http://www.lryc.cn/news/263736.html

相关文章:

  • 虚拟机下Ubuntu上网设置
  • Unity3d C#利用Editor编辑器拓展实现配置UI背景样式一键设置UI背景样式功能(含源码)
  • 【微服务】服务间调用
  • 一句话分清C/C++声明和定义
  • 《哥德尔证明》阅读笔记——初等命题逻辑的一致性证明过程
  • 迪文屏开发保姆级教程—弹出键盘录入ASCII字符
  • Java,处理字符串的案例()
  • 微信小程序更新机制
  • CentOS 7 部署 Nacos-2.3.0 (单机版)
  • Springboot优雅实现对接口返回统一封装
  • Kafka 安装与部署
  • 计算 N*4*4 位姿形状的逆变换,在N*3*4位姿后补充 [0,0,0,1]
  • 人工智能可以战胜人类智慧大脑么?
  • 【数据结构和算法】 K 和数对的最大数目
  • 基于ssm高校推免报名系统源码和论文
  • 算法设计与分析2023秋-头歌实验-实验七 动态规划
  • 复杂 SQL 实现分组分情况分页查询
  • JavaScript---如何完美的判断返回对象是否有值
  • kafka offset sasl加密连接
  • Android studio矩形背景颜色以及弧度的设置
  • Acrel-1000DP分布式光伏系统在某重工企业18MW分布式光伏中应用——安科瑞 顾烊宇
  • 3 python基本语法 - Dict 字典
  • Magnific AI:彻底改变 AI 生成图像的升级
  • BKP 备份寄存器 RTC 实时时钟-stm32入门
  • 1.1 数据结构-数据的表示
  • UNIX Linux系统 启动PPOCRLabel报错[已放弃 (核心已转储)]
  • 前端开发中的webpack打包工具
  • Mybatis配置-数据库厂商标识(databaseIdProvider)
  • 【Java】使用递归的方法获取层级关系数据demo
  • 工业6轴机械臂运动学逆解(解析解)