节流防抖

news2025/1/19 2:57:34

节流:wait时间内只能执行一次func

防抖:触发后延迟wait秒调用func

代码对比:(建议自己手敲一遍,不要养成直接cv的坏习惯)

节流:

其中的apply函数是   

apply() 是 JavaScript 函数的一个方法,它用于调用函数并设置函数内部 this 关键字的指向。

throttle() 函数中,func 是传入的需要防抖的函数,args 是该函数的参数列表。当节流函数执行时,会通过 apply() 方法调用传入的函数,并将 this 指向当前的上下文环境,同时将参数 args 传递给该函数。 

节流函数通常运用在限制调用频率场景

  • 搜索框输入时的实时联想
  • 拖拽场景防止超高频次触发位置变动
  • 滚动场景监听scroll事件计算位置信息,比如判断是否到页面底部自动加载更多

防抖:

防抖函数通常运用在限制调用次数场景

  • 文本输入的验证,连续输入后验证一次即可
  • 防止鼠标迅速点击多次提交按钮
  • 监听 resize 事件计算尺寸信息
//防抖
function debounce(func, wait) {
  let timer = null;

  return function () {
    //检查是否存在定时器
    if (timer) {
      //清除定时器
      clearInterval(timer);
      timer = null;
    }

    let self = this;
    let args = arguments;//args 是用户函数的参数列表

    timer = setTimeout(function () {
      func.apply(self, args);//执行用户函数
      timer = null;//重置定时器
    }, wait)
  }
}
//节流
//func是用户传入需要防抖的函数
//wait是等待时间
function throttle(func, wait=50) {
  let lastTime = 0;//上一次执行该函数的时间
  let timer = null;

  return function () {
    //如果存在定时器要先清除
    if (timer) {
      clearInterval(timer);
      timer = null;
    }

    let self = this;
    let args = arguments;
    let nowTime = +new Date();

    //剩余等待时间
    const remainWaitTime = wait - (nowTime - lastTime);

    if (remainWaitTime <= 0) {
      lastTime = nowTime;
      //apply() 是 JavaScript 函数的一个方法,它用于调用函数并设置函数内部 this 关键字的指向。
      func.apply(self, args);
    } else {
      //继续等待remainWaitTime再执行
      timer = setTimeout(function () {
        lastTime = +new Date();
        func.apply(self, args);
        timer = null;//重置定时器
      }, remainWaitTime)
    }
  }
}

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

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

相关文章

Python 编程基础 | 第六章-包与模块管理 | 1、包与模块简介

一、模块 在程序开发过程中&#xff0c;文件代码越来越长&#xff0c;维护越来越不容易。可以把很多不同的功能编写成函数&#xff0c;放到不同的文件里&#xff0c;方便管理和调用。在Python中&#xff0c;一个.py文件就称之为一个模块&#xff08;Module&#xff09;。 1、简…

Acwing 3306.装珠饰(十一届蓝桥java/py组J题)

分析&#xff1a; 6件装备作为一个整体去看待&#xff01;&#xff01;&#xff01;加的效果是看总的装备数目 分组背包的一个特点&#xff1a;每一个组里面只能取出一个物品&#xff0c;这里是把抽象成不同的方案数(有点多重背包的二进制处理方法的感觉。) 代码实现&#xff1…

vue-cli脚手架创建项目时报错Error: command failed: npm install --loglevel error

项目背景 环境&#xff1a;vue-cli 5.x 在工程文件中&#xff0c;后端模块wms已经创建完成&#xff0c;现在想新建一个名为vue-web的前端模块 执行命令vue create vue-web时&#xff0c; 报错Error: command failed: npm install --loglevel error 问题分析及解决 排查过程…

2023各版本JDK下载链接

Java Archive | Oracle Java Archive | Oraclehttps://www.oracle.com/java/technologies/downloads/archive/

音乐播放器蜂鸣器AX301开发板verilog,视频/代码

名称&#xff1a;音乐播放器蜂鸣器播放音乐按键切歌 软件&#xff1a;Quartus 语言&#xff1a;Verilog 代码功能&#xff1a; 设计一个音乐播放器&#xff0c;使用板子上的蜂鸣器播放歌曲&#xff0c;可以播放三首歌&#xff08;歌曲任选&#xff09;&#xff0c;通过按键控…

ESP RainMaker 客户案例 #2|PitPat

PitPat 是美国领先的健身品牌&#xff0c;致力于通过游戏化的方式改变人们的锻炼习惯&#xff0c;增强健康。该品牌通过智能设备和相关的移动应用程序为从事家庭锻炼的个人提供虚拟跑步体验。目前&#xff0c;PitPat 针对不同受众群体&#xff0c;开发了Superun&#xff0c;Dee…

JMM-多线程先行发生原则happens-before

5.6 JMM规范下多线程先行发生原则之happens-before 在JVM中&#xff0c;如果一个操作执行的结果需要对另一个操作可见或者代码重排序&#xff0c;那么这两个操作之间 必须存在happens-before&#xff08;先行发生&#xff09;原则&#xff0c;逻辑上的先后关系。 5.6.2 先行并…

9章【同余】

蒙特卡罗算法【和一个模型联系起来】 舍伍德算法【】 拉斯维加斯算法【最不靠谱&#xff0c;思路&#xff1a;把该算法和固有算法相结合】 随机数 学习目标&#xff1a; 利用数据序列的随机性和概率 分布等点&#xff0c;设计解决问题的算法或提高 已有算法的效率。 随机性…

swagger报错Illegal DefaultValue null for parameter type integer

文章目录 报错:作者说这只是一个警告并不是个错误,并且有点烦躁的说已经是提的1000个issues了解决给Integer类型或者long类型的example设置值,不设置也不行(不建议)有时候参数很多,很麻烦.或者不用处理方法一:修改AbstractSerializableParameter类的日志级别为Error方法二:修改…

【数据结构】线性表(二)单链表及其基本操作(创建、插入、删除、修改、遍历打印)

目录 前文、线性表的定义及其基本操作&#xff08;顺序表插入、删除、查找、修改&#xff09; 四、线性表的链接存储结构 1. 单链表&#xff08;C语言&#xff09; a. 链表节点结构 b. 创建新节点 c. 在链表末尾插入新节点 d. 删除指定节点 e. 修改指定节点的数据 f. …

循环日程安排问题(分治法)

函数接口定义&#xff1a; void Plan(int a[][N],int k); 裁判测试程序样例&#xff1a; #include #include <math.h> #include using namespace std; #define N 100 void Plan(int a[][N],int k); int main() { int i,j,a[N][N],k,size; cin>>k; sizepow(2,k)…

“滑动窗口”算法专项训练

目录 题目链接&#xff1a;长度最小的子数组 题目描述 思路分析&#xff1a;滑动窗口(利用单调性&#xff0c;使用"同向双指针来优化) 细节处理 画图解析 代码 题目链接&#xff1a;最大连续1的个数 III 题目描述 思路分析&#xff1a;滑动窗口(同向双指针) 细节…

面对纷繁复杂的低代码和无代码产品,开发者该如何选择?

凭借着革命性的生产力优势&#xff0c;低代码技术火爆了整个IT圈。面对纷繁复杂的低代码和无代码产品&#xff0c;开发者该如何选择&#xff1f; 在研究低代码平台的年数上&#xff0c;本人已有3年&#xff0c;也算是个低代码资深用户了&#xff0c;很多企业面临低代码选型上的…

TCP/IP(二十)TCP 实战抓包分析(四)TCP 第二次握手 SYN、ACK 丢包

一 实验二&#xff1a;TCP 第二次握手 SYN、ACK 丢包 重点&#xff1a; 通过设置 tcp_synack_retries 和 tcp_syn_retries内核参数,观察丢包的现象 ① 实验环境 iptables -t filter -I INPUT -s 172.25.2.100 -j DROPtcpdump -nni ens3 tcp and host 172.25.2.100 and por…

【算法 | 位运算No.1】leetcode268. 丢失的数字

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【Leetcode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

打造一个开箱即用的超级丝滑的漂亮hexo博客网站

打造一个开箱即用的超级丝滑的漂亮hexo博客网站 目录 文章目录 打造一个开箱即用的超级丝滑的漂亮hexo博客网站目录文章持续更新地址鸣谢hexo简介hexo优缺点优点缺点&#x1f44e; 没有后台管理 博客效果主题特性版本迭代1.原版版本迭代2.自己版本迭代 贡献者主题下载&#x1f…

Python中if __name__ == ‘__main__‘

1. 在Python中&#xff0c;凡是以两个下划线开头&#xff0c;两个下划线结尾的变量叫做“魔法变量”。瓦特&#xff1f;魔法变量&#xff1f;对&#xff0c;你没有听错&#xff0c;就是魔法变量。所谓魔法变量就是Python对象内置天生就有的属性变量&#xff0c;你使用这些变量前…

开关电源测试方案介绍:如何进行电源耐压测试?

耐压测试是检验电源模块、电器设备等承受过压能力的测试方法&#xff0c;同时电源模块耐压测试还可以检测出设备的绝缘性能。在电气设备的使用过程中会出现电压突然上升的情况&#xff0c;有时也会因为天气原因出现高压&#xff0c;如果耐压性能弱&#xff0c;设备绝缘能力差&a…

【Java学习之道】SQL语言的基本语法与操作

引言 对于初学者来说&#xff0c;数据库编程可能听起来有些复杂&#xff0c;但实际上&#xff0c;只要掌握了SQL语言的基本语法和操作&#xff0c;你就能够轻松地处理各种数据问题。本章将为你揭示SQL语言的魅力&#xff0c;帮助你快速入门数据库编程。 一、SQL语言简介 SQL…

Three.js柏林噪音 流动球体

代码&#xff1a;https://gitee.com/honbingitee/three-template-next.js/tree/shader/ 参考油管视频&#xff1a;https://www.youtube.com/watch?voKbCaj1J6EI 核心&#xff1a; 创建循环的图形 应用噪声 顶点按照法相偏移 CustomMaterial(): ShaderMaterial {const material…