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,会在短时间内触发多次 ...
随机推荐
- ARMS企业级场景被集成场景介绍
简介: ARMS企业级场景被集成场景介绍 通过本次最佳实践内容,您可以看到ARMS OpenAPI可以灵活的被集成到客户链路监控场景,并对其进行可视化图形展示监控信息. 1. 背景信息 应用实时监控服 ...
- Region-区域
定义Region的方式有两种: 一种是在XAML定义 RegionManager.RegionName(XAML) 一.View代码 1 <Viewbox Grid.Column="1 ...
- 实验1 在MAX10 FPGA上实现组合逻辑
实验1 在MAX10 FPGA上实现组合逻辑 实验前的准备工作:参照讲义步骤安装Quartus,Modelsim和System Builder.阅读材料:1)推荐的文件组织形式:2)Verilog 1 ...
- C#使用MX Component实现三菱PLC软元件数据采集的完整步骤（仿真）
前言 本文介绍了如何使用三菱提供的MX Component插件实现对三菱PLC软元件数据的读写,记录了使用计算机仿真,模拟PLC,直至完成测试的详细流程,并重点介绍了在这个过程中的易错点,供参考. 用 ...
- 网络协议分析与抓包 TCP/IP UDP等
学习地址: https://www.bilibili.com/video/BV1hV411U74y?p=4 https://www.bilibili.com/video/BV1S7411R7kF?p= ...
- three.js案例-web3d三维地图大屏炫酷3D地图下钻地图-附源码
炫酷3D地图效果如下: 代码注释非常详细: create() { // 添加雾,随着距离线性增大,只能看到一个小是视野范围内的场景,地图缩小很多东西就会看不清 //this.scene.fog = n ...
- leaflet利用hotline实现河流差值渲染热力图
实现效果(这里做了1条主河道和5个支流): 核心代码使用了Leaflet.hotline插件,github下载地址链接 详情见我之前整理的一篇文章介绍河流热力图 核心代码逻辑: // 处理河流数据以及 ...
- uniapp中利用renderjs引入leaflet
由于uniapp中要使用地图,虽然uni-app有地图组件map,但是很难用,而且性能很差.在app中是不能操作dom,所以直接用leaflet是不可能的.最终发现了renderjs,官网提出,在ap ...
- JavaScript 实现前端文件下载
A.download HTML5的A标签有一个download属性,可以告诉浏览器下载而非预览文件,很实用,参考链接:http://www.zhangxinxu.com/wordpress/2016/ ...
- 密码学—仿射密码Python程序
文章目录 仿射密码 加密算法 解密算法 仿射密码 古典密码,且属于单表加密. 加密算法 仿射密码公式 c = m×k + b mod 26 c是密文,m是明文,m作为26字母中的明文,因此计算出来的密 ...