JavaScript实现防抖节流函数
review
防抖函数
防抖函数一般是短时间内多次触发，但是只有最后一次触发结束后的delay秒内会去执行相对应的处理函数。
相当于一个赛道里面一次只能跑一辆赛车，如果此时已经有一辆赛车在跑道里面跑，但是又进来了一辆，那么之前那一辆赛车就会被清空。知道有一辆赛车到达终点，然后执行函数。
也就是说，防抖函数多次触发，但是一段时间内触发的n次，最后只能有一次会执行。
节流函数
节流函数如果也用赛车的案例来举例，就是说：
一个赛道里面，如果此时已经有了一辆赛车，那么其他想要进入赛道的赛车就会被阻止，直到前一辆赛车进去以后，才会被允许进入一辆新赛车。
下面的代码中我实现了两种版本的节流函数：
- 第一次触发立即执行（使用时间戳）
- 第一次触发，需要等待delay秒之后才执行
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖节流</title>
<style>
div {
width: 300px;
height: 300px;
background: #000;
}
</style>
</head>
<body>
<input type="text">
<div></div>
</body>
<script>
const input = document.getElementsByTagName('input')[0];
input.addEventListener('input', queryD(dosomething, 2000));
function dosomething() {
console.log('do some thing');
}
// 防抖函数(触发后delay秒内不能再触发，否则重新计时)
// 可以应用于需要频繁发送请求的场景下
function queryD(func, delay) {
console.log('in query d');
let time = null
return function () {
clearTimeout(time);
time = setTimeout(func, delay);
}
}
//----------------------------------------------------
const div = document.querySelector('div');
div.addEventListener('touchmove', cost(dosomething, 500));
div.addEventListener('touchmove', useDate(dosomething, 500));
// 节流函数(一段时间内只能发生一次)
// 第一次执行也需要在delay秒之后
function cost(func, delay) {
let time = null;
return () => {
if (!time) {
time = setTimeout(() => {
func();
time = null;
}, delay);
}
}
}
// 使用date实现节流函数
// 可以立即执行，下一次执行需要等待delay秒之后
function useDate(func, delay) {
let time = new Date().getTime();
return () => {
const cur = new Date().getTime();
if (cur - time > delay) {
time = cur;
func();
}
}
}
</script>
</html>
JavaScript实现防抖节流函数的更多相关文章
- JavaScript防抖节流函数
1.直接上码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- JS基石之-----防抖节流函数
防抖和节流函数 阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别 一.防抖函数 1.1 概念: 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算 ...
- vue防抖节流函数---组件封装,防止按钮多次点击
1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...
- vue 防抖节流函数——组件封装
防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 节流(throttle) 所谓节流,就是指连续触发事件但是在 ...
- 【跟着大佬学JavaScript】之lodash防抖节流合并
前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...
- JavaScript：防抖与节流
①防抖: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 详解防抖函数（debounce）和节流函数（throttle）
本文转自:https://www.jianshu.com/p/f9f6b637fd6c 闭包的典型应用就是函数防抖和节流,本文详细介绍函数防抖和节流的应用场景和实现. 函数防抖(debounce) 函 ...
- Javascript性能优化之节流函数
在我们的工作中往往有这样的需求,下拉上拉加载实现无限加载列表数据这样的一个功能,这个时候小伙伴们可能就觉得这个功能几分钟的事,于是乎,下边这段代码浩浩荡荡就出来了 window.addEventLis ...
- JS奇淫巧技：防抖函数与节流函数
应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整 ...
- JS 防抖函数和节流函数
文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...
随机推荐
- 阿里大数据云原生化实践，EMR Spark on ACK 产品介绍
开源大数据社区 & 阿里云 EMR 系列直播 第六期 主题:EMR spark on ACK 产品演示及最佳实践 讲师:石磊,阿里云 EMR 团队技术专家 内容框架: 云原生化挑战及阿 ...
- WPF 使用 Skia 解析绘制 SVG 图片
本文告诉大家如何在 WPF 里面,使用 Skia 解析绘制 SVG 图片.本文也适合控制台使用 SkiaSharp 解析绘制 SVG 图片,本文的 WPF 部分只是在 Skia 绘制完成之后,将 Sk ...
- 在线程中使用Spring的Bean的方法、不推荐把“线程”注入到Spring
一.不推荐把"线程"注入到spring 将线程注入到Spring容器中并不是一个常见的做法,而且通常也不推荐这样做,原因如下: 生命周期管理困难: Spring管理的Bean生命周 ...
- 【YoloDeployCsharp】基于.NET Framework的YOLO深度学习模型部署测试平台
1. 项目介绍 基于.NET Framework 4.8 开发的深度学习模型部署测试平台,提供了YOLO框架的主流系列模型,包括YOLOv8~v9,以及其系列下的Det.Seg.Pose.Obb ...
- 【爬虫+情感判定+Top10高频词＋词云图】"乌克兰"油管热评python舆情分析
目录 一.分析背景 二.整体思路 三.代码讲解 3.1 爬虫采集 3.2 情感判定 3.3 Top10高频词 3.4 词云图 四.得出结论 五.同步视频演示 六.附完整源码 一.分析背景 乌克兰局势这 ...
- 一键关闭 Win11 系统广告「GitHub 热点速览」
不知道读者中有多少人早已对 Windows 11 系统自带的广告感到厌烦,却又不知道如何关闭它们? 虽然网上有详细的关闭教程,但是都需要逐一手动操作,不是很方便.所以,今天「GitHub 热点速览」给 ...
- WEB集群 - LNMT集群架构部署zrlog
目录 1. 集群环境说明 2. NFS部署 3. mysql部署 4. redis部署 5. tomcat部署 6. nginx负载均衡部署 7. 客户端访问 8. tomcat+redis实现会话共 ...
- Linux系统中如何部署php
1. 在线安装 Apache 服务器 ubuntu 可通过"apt"等命令在线安装,centos用yum. # ubuntu sudo apt-get install apache ...
- 前端使用 Konva 实现可视化设计器（10）- 对齐线
请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 Bug,欢迎来提 Issue 哟~ github源码 gitee源码 示例地址 不知不觉来到第 10 章了,感觉接近尾声了... 对齐线 ...
- Spring源码阅读 ------------------- SpringFrameWork 5.2 术语理解(三)
一.一定要理解的概念 1.控制反转 对象A和对象B,对象A中需要new 一个对象B,但是,现在需要对象A,不在自己内部new 对象B,把new 对象B的权限交给第三方(IOC框架),操作的过程,就是控 ...