JS定时器实现函数节流和防抖 -简单实现对比 -适用地方
如题 (总结要点)
- 防止重复点击！
- 最近项目中遇见这个“函数抖动”的问题！快速点击前端xx按钮，造成数据多次加载进页面里，正常只显示10条数据，结果显示了20条数据，异常！
- 出现原因： 前端发送ajax异步请求（异步）， 假设发送两次bindData 同时请求，同时清空已有数据，同时接受返回的结果，一个list中便存储了两份数据。手速够快，还可以加进更多分！
- 解决方案：函数节流！强制2秒内仅执行一次！
- 原文链接 :
借鉴学习文章列表
- 链接1: https://www.jianshu.com/p/c8b86b09daf0 函数防抖和节流
- 链接2: https://www.runoob.com/w3cnote/javascript-settimeout-usage.html JavaScript setTimeout() 用法详解（主要靠这个实现）
1.代码： 节流和防抖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节流</title>
</head>
<body>
<p>
<h4>模板 鼠标移动一次计数+1</h4>
关联文本，绑定，触发鼠标事件
</p>
<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script type="text/javascript">
let count =0;
let content = document.getElementById('content');
function countNum() {
count++;
content.innerHTML = count;
}
content.onmousemove = countNum
</script>
<hr>
<p>
<h4>节流思路 </h4>
每两秒允许触发一次计数时间
设置一个计数变量‘timeout’，每次执行加法的时候判断timeout是否为0；<br>
如果为0，则执行加法，将timeout变为2000，设置计数时间，在两秒后置零timeout；<br>
否则因为timeout没有置零，什么都不做，干等着就行了。<br>
</p>
<div id="content2" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script type="text/javascript">
let count2 = 0;
let content2 = document.getElementById('content2');
let timeout=0
function countNum2() {
// timeout不为空，则间隔时间还没结束，等着结束
if(timeout!==0){
console.log('wait，节流中，2s时间还没有到，什么都不做--')
}else{
// 立即执行加法
count2++;
content2.innerHTML = count2;
timeout=2000
// 设置计数器
setTimeout(function clearTime() {
timeout = 0
}, timeout)
}
}
content2.onmousemove = countNum2
</script>
<hr>
<p>
<h4>防抖思路 </h4>
冷却时间不够，就重新计算冷却时间，直至冷却时间够了在调用
</p>
<div id="content3" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script type="text/javascript">
let count3 = 0;
let content3 = document.getElementById('content3');
let timeout3=0
let meter
function countNum3() {
// timeout不为空，则间隔时间还没结束，等着结束
if(timeout3!==0){
console.log('wait，防抖，2s时间还没有到，重新开始2s计数')
// 清空计时器，重新开始计时
clearTimeout(meter)
meter = setTimeout(function clearTime() {
timeout3 = 0
}, timeout3)
}else{
// 立即执行加法
count3++;
content3.innerHTML = count3;
timeout3=2000
// 设置计数器
meter = setTimeout(function clearTime() {
timeout3 = 0
}, timeout3)
}
}
content3.onmousemove = countNum3
</script>
</body>
</html>
2.测试
3. 适用场景
以上即可，灵活运用；比如文件下载就防抖（这个比较占用服务器资源，不可频繁下载），页面刷新就节流。
JS定时器实现函数节流和防抖 -简单实现对比 -适用地方的更多相关文章
- JS 函数节流与防抖
前言 事件的触发权很多时候属于用户,可能会出现下列问题: 向后台发送数据,用户频繁触发,对服务器造成压力: 一些浏览器事件,如window.onresize,window.mousemove等,触发的 ...
- js 函数节流和防抖
js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...
- JS中的函数节流throttle详解和优化
JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- JS在项目中用到的AOP, 以及函数节流， 防抖, 事件总线
1. 项目中在绑定事件的时候总想在触发前,或者触发后做一些统一的判断或逻辑,在c#后端代码里,可以用Attribute, filter等标签特性实现AOP的效果,可是js中没有这种用法,归根到本质还是 ...
- JS函数节流和防抖
看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...
- js函数节流和防抖的理解与实现
一:函数防抖1.理解:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间2.思路:每次触发事件时都取消之前的延时调用方法 3.实现: function debounce ...
- 谈谈JS中的函数节流
好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...
- [转] 谈谈JS中的函数节流
函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的.例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间.连续尝试进行过多的DOM 相关操作可能会导致浏览 ...
随机推荐
- .NET 微服务 学习目录
概述 微服务在Java端已经有很成熟的框架可以使用,之前.NET一直没有比较成熟的网关,最近发现 Ocelot 这个.NET开源的微服务网关功能越来越强大,正好照着微软的官方文档学些一下.NET的微服 ...
- 【06月04日】A股滚动市盈率PE历史新低排名
2010年01月01日 到 2019年06月04日 之间,滚动市盈率历史新低排名. 上市三年以上的公司,2019年06月04日市盈率在300以下的公司. 1 - 阳光照明(SH600261) - 历史 ...
- webstorm创建js文件时自动生成js注释
设置webstorm创建js文件时自动生成js注释 settings--Editor--File and Code Temlates 黑色框框里的内容自己填写上去,以下是参考的代码块: /** * @ ...
- HTML基础（一）基本语法知识
HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head& ...
- Spring（或者SpringBoot）整合Spring-Session实现共享session
传统Spring 先引入依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...
- [转帖]进程状态的转换与PCB详解
进程状态的转换与PCB详解 https://blog.csdn.net/qq_34666857/article/details/102852747 挺好的 之前没好好学习. 返回主目录 之前的 ...
- springboot yml配置文件注入值
1.编写javabean: package com.example.springboot.bean; import org.springframework.boot.context.propertie ...
- kubernetes 1.15 有哪些让人眼前一亮的新特性？
原文链接:kubernetes 1.15 有哪些让人眼前一亮的新特性? 2019 年 6 月 20 日,Kubernetes 重磅发布了 1.15 版本,不过笔者忙到现在才有空认真来看一下到底更新了哪 ...
- sqlserver读取日志以及复制
首选,在事务日志中,到底有多少是需要复制的?使用以下命令,可以确定事务日志中被标志为复制的命令有多少. USE test GO SELECT count(*) FROM ::fn_dblog(NULL ...
- python 搭建 websocket server 发送 sensor 数据
搞了几天,顺便把代码贴这里,需要的 python 包: gevent,gevent-websocket,bottle,wiringpi-python 简单说明: - gevent 提供了支持 conc ...