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

防抖和节流

  1. 防抖和节流的区别?

防抖:触发高频事件后n 秒内 函数只会执行一次,如果n秒内 高频事件在在次触发,则会重新计算

节流:高频事件触发,但在n 秒内 只会执行一次,所以节流会稀释函数的执行频率

下面就是代码相关的显示:

防抖代码:

适用场景:

  1. 登录、发送短信等按钮避免用护点击过快,以至于发送了多次请求,需要防抖

  1. 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次 到位,就用到了防抖,

  1. 文本编辑器事实保存,当前无任何操作一秒后进行保存

防抖原理代码如下:

1.定义一个函数,里面分别会传入两个参数:参数1:处理的函数,参数2:等待时间
2.定义一个外部局部变量
3.返回一个函数(这个函数实际是一个闭包)
4.判断这个任务是否存在,如果有就把之前的取消掉
5.然后创建一个新的任务,在里面去执行这个函数(记住改变this,如果不改变会出现作用域的一个情况)
  var square=document.querySelector(".square")function debounce(fn,wait){ //参数1: 处理函数,参数2:等待时间//1.定义一个变量let timeout;return function(){ //定义一个返回的函数:闭包
//2.如果这个定时任务存在,就把这个定时任务取消掉,
if(timeout) clearTimeout(timeout)//取消之前的无效任务:大概的意思是判断有没有这个任务的存在,那我就把之前的任务给去掉//3.然后重新创建一个任务,然后在这个里面去执行这个函数timeout=setTimeout(()=>{fn.apply(this);},wait)}
}
//使用:假如我们这里调用的是事件
search.onkeyup=debounce(count,2000)//闭包,这个return 返回函数才是我们正真的结果

节流代码如下:

使用场景:

  1. scroll 事件,每隔一秒计算一次位置信息等

  1. input 框 事实搜索 并发送请求展示下拉列表,每隔一秒发送一次请求

节流原理代码如下:

1.判断有没有定时任务,如果定时任务不存在,就要创建一个定时任务
2.创建任务之后,在清除任务,在执行任务
function throttle(fn,wait){
let timeout;
return function(){
//判断如果没有定时任务,定时任务不存在,就要创建一个定时任务
if(!timeout){ 
timeout=setTimeout(()=>{
//清除任务
timeout=null;
fn()
},wait)
}
}
}
search.onkeyup=throttle(count,2000)//闭包,这个return 返回函数才是我们正真的结果

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

相关文章:

  • vue3 微信扫码登录及获取个人信息实现的三种方法
  • Java8 新特性强大的Stream API
  • day22_IO
  • 第三十八章 linux-并发解决方法二(信号量)
  • 数据结构-考研难点代码突破(C++实现树型查找 - B树插入与遍历,B+树基本概念)
  • Python可视化界面编程入门
  • 基于Java+SpringBoot+Vue前后端分离书店购书系统设计与实现
  • Android:截屏/视频截图
  • leecode-C语言实现-28. 找出字符串中第一个匹配项的下标
  • 使用 Postman 实现 API 自动化测试
  • k8s环境jenkins发布vue项目指定nodejs版本
  • 我应该把毕业设计做到什么程度才能过关?
  • 力扣-合作过至少三次的演员和导演
  • 【 PMU】信号生成、采样、分割、估计器应用和误差计算(Matlab代码实现)
  • 电子技术——AB类输出阶的偏置
  • 元宇宙营业厅,数字技术融合,赋能实体经济
  • MySql面试精选—分库分表
  • Spring上下文生命周期
  • GitHub 标星 15w,如何用 Python 实现所有算法?
  • LeetCode 700. 二叉搜索树中的搜索
  • 【数据结构】树与二叉树
  • Stress压力工具的部署及使用
  • [蓝桥杯 2020 省 AB3] 乘法表
  • Python基础知识
  • FME案例实战教程:聚焦实战应用,摆脱思路束缚,您值得拥有
  • 【JavaScript】根据元素内容遍历元素的方案
  • kafka全解
  • (三)随处可见的LED广告屏是怎么工作的呢?接入GUI
  • 线程池简介
  • 大数据面试题集锦-Hadoop面试题(四)-YARN