js 防抖函数 节流函数
某些事件中(如 onresize onscroll onkeydown onkeyup onmousemove …)，会连续触发函数的执行，如果函数执行一些耗时的操作(如请求数据…)，会影响性能，也有可能造成服务器压力。这时可以用 防抖函数 或 节流函数解决这种问题。
防抖函数:
不管事件怎么连接触发函数的执行，我只在事件结束后的N毫秒执行一次函数；如果事件还在连接触发，就不执行函数。
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8" /><style type="text/css">#box{width:200px;height:200px;border: 1px solid red;}</style>
</head>
<body><div id="box"></div></body>
<script>
function debounce(fn,wait){let timeoutId = null;return function(){let args = arguments;timeoutId && clearTimeout(timeoutId);timeoutId = setTimeout(function(){fn(args);},wait)}
}
function doing(arg){console.log(arg);
}
let fn = debounce(doing,1000);
box = document.getElementById("box");
box.onmousemove = function(){fn(1,2,3);
}
</script>
</html>效果图：
节流函数:
事件在连接触发的过程中，我会隔N毫秒执行一次函数；如果N毫秒内多次触发事件，则只会执行一次函数。
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8" /><style type="text/css">#box{width:200px;height:200px;border: 1px solid red;}</style>
</head>
<body><div id="box"></div></body>
<script>
function throttle(fn,wait){let timeoutId = null;return function(){let args = arguments;let now = Date.now();if(!timeoutId){timeoutId = setTimeout(function(){timeoutId = null;fn(args);},wait)}}
}function doing(arg){console.log(arg);
}
let fn = throttle(doing,1000);
box = document.getElementById("box");
box.onmousemove=function(){fn(1,2,3);
}
</script>
</html>效果图：
自己体会一下 防抖函数 和 节流函数 的区别吧。
可以根据 效果图 体会体会。
体会不明白的，自己去写一下，运行试试了。
防抖函数的应用场景：建议百度一下。懒得写。
节流函数的应用场景：建议百度一下。懒得写。
---- 结束 ----
仅学习。
相关文章：
js 防抖函数 节流函数
某些事件中(如 onresize onscroll onkeydown onkeyup onmousemove …)，会连续触发函数的执行，如果函数执行一些耗时的操作(如请求数据…)，会影响性能，也有可能造成服务器压力。这时可以用 防抖函数 或 节流函数解决这种问题。 防…...
Yarn节点unhealthy解决办法
这几天用Spark计算任务时，发现yarn上有两个节点不参与计算，很是tm的离谱。使用下面的命令查看Yarn上的nodemanager节点状态yarn node -list -all发现两个节点处于unhealthy状态。经过Google查明原因：这种情况一般是因为那个节点上HDFS文件过多…...
【jumpServer 功能梳理】
用户管理 1.1 用户列表 创建jumpServe 账号 ;角色分为用户 管理员；更新账号信息；查看用户详情以及授权的资产； 1.2 用户组 用户组，这个组的意义在于用一个统称对接资源；用户组包含多个用户，可以操作增加删除…...
中国各省人力资本测算就业人员受教育程度构成（2000-2021年）
数据来源：自主整理 时间跨度：2000-2021年 区域范围：全国各省 指标说明： 人力资本测算公式：（小学*6初中*9高中*12大专及以上*16）/六岁及以上人口 参考文献： [1]罗仁福, 刘承芳,…...
java面试题-集合篇
Collection1.Collection有哪些类？Java集合框架中的Collection接口是所有集合类的基础接口，定义了一些基本的集合操作，如添加元素、删除元素、判断是否包含某个元素等。常见的集合类包括List、Set和Queue。ListList接口定义了按照索引访问和操…...
Python 异步: 同时运行多个协程（10）
asyncio 的一个好处是我们可以同时运行许多协程。这些协同程序可以在一个组中创建并存储，然后同时一起执行。这可以使用 asyncio.gather() 函数来实现。 让我们仔细看看。 1. 什么是 Asyncio gather() asyncio.gather() 模块函数允许调用者将多个可等待对象组合在一…...
SVN 获取多版本间的更新内容
文章目录背景介绍操作步骤 - 获取某段时间内的代码更新内容背景介绍 公司有个项目期初明确要做微信小程序，没有做其他端的意向，并且当时团队人数有限，没有项目实践过 uniapp，项目时间周期紧，就没有用 uniapp 去实现 然…...
c++ const使用说明
作⽤ 1. 修饰变量，说明该变量不可以被改变； 2. 修饰指针，分为指向常量的指针和指针常量； 3. 常量引⽤，经常⽤于形参类型，即避免了拷⻉，⼜避免了函数对值的修改； 4. 修饰成员函数…...
VSTO 开发 EXCEL 委托与多线程的极简示例
VSTO 开发 EXCEL 委托与多线程的极简示例问题解决步骤代码问题 这几天做 excel 加载项时遇到一个问题，对话框弹窗显示后，需要等待网络数据的返回来填充 ListBox 控件，由于网络延迟问题，整个窗体连带 Excel 一起白屏卡顿 5-10秒&a…...
spring之使用Spring的AOP
文章目录前言一、准备工作1、添加相应的依赖2、添加相应的命名空间3、创建目标类4、创建切面二、使用AOP1.在切面类中编写增强代码以及切点表达式2、开启aspectj的自动代理3、测试类4、测试结果前言 Spring对AOP的实现包括以下三种方式 1、Spring框架结合AspectJ框架实现的AOP…...
LeetCode LCP 66. 最小展台数量
力扣嘉年华将举办一系列展览活动，后勤部将负责为每场展览提供所需要的展台。 已知后勤部得到了一份需求清单，记录了近期展览所需要的展台类型， demand[i][j] 表示第 i 天展览时第 j 个展台的类型。 在满足每一天展台需求的基础上，…...
设计模式之模板方法模式
什么是模板方法模式 模板方法模式定义了一个操作中算法的框架，而将一些步骤延迟到子类中，使得子类可以不改变一个算法的结构就可以重定义该算法的某些特定步骤。 模板方法模式主要包含几下几个角色： AbstractClass(抽…...
Python数据挖掘基础
一、Matplotlib 画二维图表的python库，实现数据可视化 ， 帮助理解数据，方便选择更合适的分析方法1、折线图1.1引入matplotlibimport matplotlib.pyplot as plt %matplotlib inlineplt.figure() plt.plot([1, 0, 9], [4, 5, 6]) plt.show()1.2…...
Go基础-函数
文章目录1 定义2 参数的写法3 返回值的写法4 空白符1 定义 函数是将输入数据通过一系列算法运算之后，输出对应的结果。函数一般都是一些特定的功能块，实现某一种功能的封装，降低代码的冗余性 语法 // 关键字 函数名 函数参数 返…...
AC的改进算法——TRPO、PPO
两类AC的改进算法 整理了动手学强化学习的学习内容 1. TRPO 算法（Trust Region Policy Optimization） 1.1. 前沿 策略梯度算法即沿着梯度方向迭代更新策略参数 。但是这种算法有一个明显的缺点：当策略网络沿着策略梯度更新参数，…...
【C++学习】list的使用及模拟实现
🐱作者：一只大喵咪1201 🐱专栏：《C学习》 🔥格言：你只管努力，剩下的交给时间！ list的使用及模拟实现😼构造函数🐵模拟实现😼迭代器🐵…...
动态规划专题精讲1
致前行的人： 要努力，但不要着急，繁花锦簇，硕果累累都需要过程！ 前言： 本篇文章为大家带来一种重要的算法题，就是动态规划类型相关的题目，动态规划类的题目在笔试和面试中是考察非常高…...
PPO（proximal policy optimization）算法
博客写到一半发现有篇讲的很清楚，直接化缘了 https://www.jianshu.com/p/9f113adc0c50 Policy gradient 强化学习的目标：学习到一个策略πθ(a∣s)\pi\theta(a|s)πθ(a∣s)来最大化期望回报。 一种直接的方法就是在策略空间中直接搜索来得到最优策略&…...
ElasticSearch基本使用
title: ElasticSearch基本使用 date: 2022-08-29 00:00:00 tags: ElasticSearch基本使用 categories:ElasticSearch 基本概念 随着ES版本的升级，文中有些概念可能已经废弃。 索引词(term) 一个能够被索引的精确值，区分大小写，可以通过term查…...
windows微软商店下载应用失败/下载故障的解决办法；如何在网页上下载微软商店的应用
一、问题背景 设置惠普打印机时，需要安装hp smart，但是官方只提供微软商店这一下载渠道。 点击安装HP Smart，确定进入微软商店下载。 完全加载不出来，可能是因为开了代理。 把代理关了，就能正常打开了。 但是点击“…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。 从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...
反射获取方法和属性
Java反射获取方法 在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...
从零实现STL哈希容器：unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学？传统医学奠基期（远古 - 17 世纪）近代医学转型期（17 世纪 - 19 世纪末）现代医学成熟期（20世纪至今） 中医的源远流长和一脉相承远古至…...