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,会在短时间内触发多次 ...
随机推荐
- 阿里 & 蚂蚁自研 IDE 研发框架 OpenSumi 正式开源
简介:经历近 3 年时间,在阿里集团及蚂蚁集团共建小组的努力下,OpenSumi 作为国内首个强定制性.高性能,兼容 VS Code 插件体系的 IDE 研发框架,今天正式对外开源. 作者 | ...
- Quick BI产品核心功能大图（六）开放集成
简介:企业想要拥有领先的数据分析能力,自研往往需要投入巨大的人力和财力. Quick BI作为唯一一个连续两年入选Gartner魔力象限的中国BI产品,具备强大的全链路开放集成能力,可以轻松的与企业 ...
- KubeDL 加入 CNCF Sandbox，加速 AI 产业云原生化
简介: 2021 年 6 月 23 日,云原生计算基金会(CNCF)宣布通过全球 TOC 投票接纳 KubeDL 成为 CNCF Sandbox 项目.KubeDL 是阿里开源的基于 Kuberne ...
- [FAQ] 钉钉 Excel 回车键不能换行 ? 在线编辑如何换行
Win 端表格换行:AIT+ENTER Mac 端表格换行:AIT OPTION+ENTER Tool:ChatAI Refer:钉钉技巧 Refer:https://www.dingtalk.c ...
- Rancher管理K8s集群(14)
一.Rancher介绍 1.1 Rancher简介 Rancher 是一个开源的企业级多集群 Kubernetes 管理平台,实现了 Kubernetes 集群在混合云+本地 数据中心的集中部署与管理 ...
- 提取jks文件证书和私钥
提取jks文件证书和私钥 JKS文件由公钥和密钥构成利用Java Keytool 工具生成的文件,它是由公钥和密钥构成的,公钥就是我们平时说的证书(.cer后缀的文件),私钥就是密钥(.key后缀的文 ...
- 接私活利器！推荐一个基于SpringBoot3的后台管理框架
大家好,我是 Java陈序员. 今天,给大家推荐一个后台管理框架,适合二次定制开发.接私活.源码学习等场景. 关注微信公众号:[Java陈序员],获取开源项目分享.AI副业分享.超200本经典计算机电 ...
- Unity 热更--AssetBundle学习笔记 0.7
AssetBundle AB包是什么? AssetBundle又称AB包,是Unity提供的一种用于存储资源的资源压缩包. Unity中的AssetBundle系统是对资源管理的一种扩展,通过将资源分 ...
- 1.13~1.14&&放假寄
1.13 3点就放了,手机在机房就能拿到,我为了给手机充会电又多留了一会(事实证明这挺对的) 因为我们是 化微机的班,老师收手机都放在一个箱子里,要有人负责把剩下的手机搬到教室,我走得晚还被当成免费劳 ...
- ContextCapture-硬件配置推荐
ContextCapture倾斜摄影的空三计算.三维建模应用.非常耗费硬件资源,适当调整硬件配置,可以显著提高模型处理时间. 硬件常见问题 随着倾斜摄影建模算法成熟,应用越来越广泛,数据量越来越大,需 ...