原生js中的防抖节流笔记

防抖,单位时间内,频繁触发,只执行最后一次

效果演示

  • 优化前,不断触发,浪费性能
    请添加图片描述

  • 优化后,只在指定时间内触发
    请添加图片描述

演示代码

import debounce from "/node_modules/lodash-es/debounce.js";
const oBox = document.getElementById("box");
let index = 0;
function move() {this.innerHTML = index++;
}//默认进来调用一次
move.call(oBox);
//使用防抖
oBox.addEventListener("mousemove", debounce(move, 1000));
//不使用防抖
// oBox.addEventListener("mousemove", move);//自己封装的防抖
function _debounce(fn, delay) {clearTimeout(this.timeId);this.timeId = setTimeout(() => {move.call(this);}, 1000);
}
 #box{width: 100px;height: 100px;background: red;color:#fff;text-align: center;cursor: pointer;}
<div id="box"></div>

封装优化

function _debounce(fn, delay) {//默认进来调用一次move.call(oBox);return function () {clearTimeout(fn.timeId);fn.timeId = setTimeout(() => {move.call(this);}, delay);};
}

节流,单位时间内,频繁触发,只执行第一次,期间触发不执行,500s再执行
窗口大小改变时的布局调整:当用户快速调整窗口大小时,节流可以确保在每个时间段内只执行一次布局调整操作,避免过度渲染。
滚动事件的处理:滚动事件可能会非常频繁地触发,节流可以限制滚动事件处理器的执行频率,提高性能。
使用场景: 比如: 监听滚动条,每隔一段时间计算一次位置

请添加图片描述

在定时器里面是无法清除定时器的,这是一个bug,在定时器外面可以清除,所以必须手动重置为null

封装节流

oBox.addEventListener("mousemove", _throttle(move, 500));function _throttle(fn, delay) {//默认进来调用一次fn.call(oBox);const mowTime = Date.now();return function () {if (fn.timeId) return;fn.timeId = setTimeout(() => {fn.call(this);// 在定时器里面是无法清除定时器的,这是一个bug,在外面可以清除clearTimeout(fn.timeId);// fn.timeId = null;}, delay);};
}
function _throttle2(fn, delay) {let now = Date.now();// 第一次进来,直接执行fn.call(oBox);// 第二次进来,判断是否超过了规定时间// 超过了规定时间,执行return function () {const t = Date.now() - now - delay;if (t >= 0) {fn.call(this);now = Date.now();}};
}

请添加图片描述
不手动重置定时器,触发是没反应的

总结

在这里插入图片描述

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

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

相关文章

宿舍管理系统设计与分析

第一章 管理信息系统概述 在人类进入21世纪之际&#xff0c;随着社会的组织化程度以及企业生产的社会化程度越来越高&#xff0c;信息作为一种资源已经和材料、能源并称为现代社会化发展的三大支柱之一。管理信息系统是融科学、信息科学、系统工程以及现代通讯技术、计算机技术…

大数据-92 Spark 集群 SparkRDD 原理 Standalone详解 ShuffleV1V2详解 RDD编程优化

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

ollama+llama3.1 405B 简介

ollamallama3.1 简介 Llama 3.1是一款来自Meta的最新型号&#xff0c;提供8B、70 B和405 B模型。 llama3.1:latestllama3.1:8bllama3.1:70bllama3.1:405bllama3.1:8b-instruct-fp16llama3.1:8b-instruct-q2_Kllama3.1:8b-instruct-q3_K_Sllama3.1:8b-instruct-q3_K_Mllama3.1…

WSL-ubuntu下载安装配置cudnn

下载 安装cuDnn的话需要和CUDA版本对应&#xff0c;可参考官网&#xff1a; cuDNN Archive | NVIDIA Developer 我的cuda是11.8 这个cuDNN8.9.7_Linux直接下载&#xff1a; https://developer.nvidia.com/downloads/compute/cudnn/secure/8.9.7/local_installers/11.x/cudn…

简约好看音乐播放器网页网站MP4播放器源码

源码介绍 简约好看音乐播放器网页网站MP4播放器源码&#xff0c;music是存放音乐的文件夹&#xff0c;添加音乐也是非常简单&#xff0c;参考上图自己研究去吧&#xff0c;不多说了。 效果截图 源码下载 简约好看音乐播放器网页网站MP4播放器源码

[笔记]中间件基础 - 进一步阅读的扩展点

mqtt肯定可以称为中间件&#xff0c;对吧&#xff1f; MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级、开放源代码的发布/订阅传输协议&#xff0c;由IBM公司发起并作为一个开源项目开发。它通常用于物联网&#xff08;IoT&#xff09;设备之…

JavaSE基础(12)——文件、递归、IO流

1、IO流 Input&#xff1a;输入&#xff0c;写数据&#xff0c;数据从磁盘加载到内存&#xff08;程序&#xff09;中。 Output&#xff1a;输出&#xff0c;读数据&#xff0c;数据从内存&#xff08;程序&#xff09;存储到磁盘中。 流&#xff1a;不管是读还是写&#xf…

wxml与标准的html的异同?

WXML&#xff08;WeiXin Markup Language&#xff09;与标准的HTML&#xff08;HyperText Markup Language&#xff09;在构建前端界面时&#xff0c;既有相似之处&#xff0c;也存在显著的差异。以下是对两者异同点的详细分析&#xff1a; 相似之处 标签结构&#xff1a; 两…

Docker中镜像文件的打包传输、容器导出镜像及虚拟机端口映射的实现

内网私有仓库 1、Docker 私有仓库 是集中存放镜像的地⽅&#xff0c;⽽注册服务器 &#xff08;Registry&#xff09;是存放仓库的具体服务器。仓库可以被认为是⼀个具体 的项⽬或⽬录。 Docker 公共仓库&#xff1a;https://hub.docker.com 2、Docker 私有仓库的作⽤&#…

C语言试题(含答案解析)

单选 1.下面C程序的运行结果为&#xff08;&#xff09; int main(void) {printf("%d", B < A);return 0; }A.编译错误 B.1 C.0 D.运行错误 A’的ascii码值为65&#xff0c;‘B’的ascii码值为66&#xff0c;‘B’<‘A’是不成立的&#xff0c;返回0&#xf…

[嵌入式 C 语言] 知识库

一、数据类型 1.1 基本数据类型 自定义类型基础类型占用字节数取值范围描述mls8char1-128 to 1278 位有符号整数mlu8unsigned char10 to 2558 位无符号整数mlvu8volatile unsigned char10 to 2558 位无符号整数&#xff0c;具有 volatile 属性mls16short2-32768 to 3276716 位…

设计模式六大原则(三)--里氏替换原则

1. 简介 1.1. 概述 里氏替换原则(Liskov Substitution Principle,简称LSP)是面向对象设计的基本原则之一。该原则由计算机科学家Barbara Liskov提出,旨在指导开发者如何更好地设计类和对象之间的关系。里氏替换原则强调的是子类可以扩展父类的功能,但不应改变原有功能。…

electron 两个渲染进程之间通信

一、使用主进程作为中介 使用主进程作为中介相对较为灵活&#xff0c;但可能会增加主进程的负担 1. 从一个渲染进程向主进程发送消息 在发送消息的渲染进程中&#xff0c;可以使用 ipcRenderer 模块向主进程发送消息。例如&#xff1a; const { ipcRenderer } require(&qu…

kubernetes k8s Secret 概述与配置讲解

目录 1 Secret概述 1.1 Secret是什么&#xff1f; 1.2 使用Secret 1 Secret概述 1.1 Secret是什么&#xff1f; 上面我们学习的Configmap一般是用来存放明文数据的&#xff0c;如配置文件&#xff0c;对于一些敏感数据&#xff0c;如密码、私钥等数据时&#xff0c;要用sec…

看图学sql之sql 中的UNION 和union all

UNION 用于合并两个或者多个 SELECT 语句的结果集 语法&#xff1a; SELECT column1, column2 ... FROM table1, table2 [WHERE condition1]UNION / UNION ALLSELECT column1, column2 ... FROM table1, table2 [WHERE condition2] 数据分析社区直达 免费数据分析资料下载。…

电机启动对单片机重启的影响

单片机使用ASM1117对9V电压降压供电&#xff0c;IO口接三极管控制电机 &#xff0c;接9V&#xff1b;每次启动瞬间&#xff0c;单片机重启 试进行分析 网上参考&#xff0c;添加滤波&#xff0c;电容&#xff0c;阻容&#xff1b;分开电源处理&#xff08;双电源&#xff09;&…

【图论】洛谷P5676 GZOI2017D1T2 小z玩游戏 题解(代码不保证AC)

一、准备材料 题目传送门 二、初步分析 看看标题前两个字是啥&#xff1f;所以本题需要用图论知识解决。 将题目给出的线索转化为一个有向图&#xff0c;再对于每个 i i i&#xff0c;判断 e i e_i ei​ 和 w i w_i wi​ 是否在同一个强连通分量里即可。 那么如何去建立这…

手动修改zk类型的kafka offset

手动修改zk类型的 offset: 连接到ZooKeeper ./zkCli.sh -server ..123:2181,.…87.124:2181,1*.*.87.125:2181 查找并修改ae_spark这个topic的消费者组的offset值 对于每个分区&#xff08;0、1、2&#xff09;&#xff0c;需要分别查看和修改offset值 查看和修改分区0的offs…

算法-模型似然值计算

1、C示例代码 for (int i 0; i < model_size; i) {// 模型i更新imm_ukf_[i].Update(Z, ntime);// 模型i观测值与预测值的差Eigen::VectorXd Zminus imm_ukf_[i].Get_Zminus();// 模型i的预测协方差矩阵Eigen::MatrixXd S imm_ukf_[i].Get_S();// 计算模型i的似然值model_…

Qt坐标系统之三个坐标系和两个变换

前言 Qt坐标系统由QPainter类控制。它和QPaintDevice和QPaintEngine类一起构成Qt绘图系统的基础。QPainter用于执行绘图操作&#xff0c;QPaintDevice是QPainter用来绘制的一个二维空间的抽象&#xff0c;QPaintEngine提供在不同设备绘图的接口。 Qt 的坐标分为逻辑坐标和物理…