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,会在短时间内触发多次 ...
随机推荐
- Spring Cloud Stream 体系及原理介绍
简介: Spring Cloud Stream在 Spring Cloud 体系内用于构建高度可扩展的基于事件驱动的微服务,其目的是为了简化消息在 Spring Cloud 应用程序中的开发. 作者 ...
- 解决 Serverless 落地困难的关键，是给开发者足够的“安全感”
简介:越来越多的云产品都会向全托管.Serverless 形态演进.当云的产品体系 Serverless 化达到一个临界值,通过函数计算这样的 Serverless 计算服务结合其他 Serverl ...
- [Trading] 专业交易: 专业交易员和散户交易员的不同, 什么是专业交易员
专业交易员可能用的是公司的钱或者自己的钱 有基本工资支持,散户用的是自己的钱 没有人提供工资来做交易. 目标不同,专业交易员的目的是增长投资账户和获得奖金,散户大部分是为了提取盈利收入而无法增长投资账 ...
- WPF 通过 GifBitmapDecoder 调用 WIC 解析 Gif 和进行动画播放的简单方法
本文告诉大家如何在 WPF 里,通过 GifBitmapDecoder 调用 WIC 层来解析 GIF 图片,然后采用动画的方式进行播放 在上一篇博客告诉大家,可以通过 GifBitmapDecode ...
- WPF 让窗口激活作为前台最上层窗口的方法
在 WPF 中,如果想要使用代码控制,让某个窗口作为当前用户的输入的逻辑焦点的窗口,也就是在当前用户活动的窗口的最上层窗口,默认使用 Activate 方法,通过这个方法在大部分设备都可以做到激活窗口 ...
- 堆优化模拟退火(List-Based Simulated Annealing|LBSA)
申明 本文部分内容来自List-Based Simulated Annealing Algorithm for Traveling Salesman Problem[1] 如有侵权,请联系删除 引入 ...
- VP NOI2023
一个月前的事情捏,因为今天刚好在摸鱼就想起来写写. Day 1 开题,先总的过一遍,好像比较传统. T1 基本上是一眼题了,简单容斥一下就可以解决.很快开始写,写好过了小样例.但是这个时候还没有大样例 ...
- 九、ODBC External Table Of Doris
ODBC External Table Of Doris 提供了Doris通过数据库访问的标准接口(ODBC)来访问外部表 ODBC Driver的安装和配置: 要求所有的BE节点都安装上相同的Dri ...
- jeecgboot集成Mongodb
1.引入jar包依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...
- C++ Virtual Functions
Virtual这个关键字在多态中扮演一个绝对重要的角色,只要member functions声明的前面加上virtual的关键字,他就会成为 Virtual member functions.任何一个 ...