如题 (总结要点)

  • 防止重复点击!
  • 最近项目中遇见这个“函数抖动”的问题!快速点击前端xx按钮,造成数据多次加载进页面里,正常只显示10条数据,结果显示了20条数据,异常!
  • 出现原因: 前端发送ajax异步请求(异步), 假设发送两次bindData 同时请求,同时清空已有数据,同时接受返回的结果,一个list中便存储了两份数据。手速够快,还可以加进更多分!
  • 解决方案:函数节流!强制2秒内仅执行一次!
  • 原文链接 :

借鉴学习文章列表

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定时器实现函数节流和防抖 -简单实现对比 -适用地方的更多相关文章

  1. JS 函数节流与防抖

    前言 事件的触发权很多时候属于用户,可能会出现下列问题: 向后台发送数据,用户频繁触发,对服务器造成压力: 一些浏览器事件,如window.onresize,window.mousemove等,触发的 ...

  2. js 函数节流和防抖

    js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...

  3. JS中的函数节流throttle详解和优化

    JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...

  4. 【javascript】js中的函数节流和函数防抖

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  5. JS在项目中用到的AOP, 以及函数节流, 防抖, 事件总线

    1. 项目中在绑定事件的时候总想在触发前,或者触发后做一些统一的判断或逻辑,在c#后端代码里,可以用Attribute, filter等标签特性实现AOP的效果,可是js中没有这种用法,归根到本质还是 ...

  6. JS函数节流和防抖

    看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...

  7. js函数节流和防抖的理解与实现

    一:函数防抖1.理解:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间2.思路:每次触发事件时都取消之前的延时调用方法 3.实现: function debounce ...

  8. 谈谈JS中的函数节流

    好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...

  9. [转] 谈谈JS中的函数节流

    函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的.例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间.连续尝试进行过多的DOM 相关操作可能会导致浏览 ...

随机推荐

  1. .NET 微服务 学习目录

    概述 微服务在Java端已经有很成熟的框架可以使用,之前.NET一直没有比较成熟的网关,最近发现 Ocelot 这个.NET开源的微服务网关功能越来越强大,正好照着微软的官方文档学些一下.NET的微服 ...

  2. 【06月04日】A股滚动市盈率PE历史新低排名

    2010年01月01日 到 2019年06月04日 之间,滚动市盈率历史新低排名. 上市三年以上的公司,2019年06月04日市盈率在300以下的公司. 1 - 阳光照明(SH600261) - 历史 ...

  3. webstorm创建js文件时自动生成js注释

    设置webstorm创建js文件时自动生成js注释 settings--Editor--File and Code Temlates 黑色框框里的内容自己填写上去,以下是参考的代码块: /** * @ ...

  4. HTML基础(一)基本语法知识

    HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head& ...

  5. Spring(或者SpringBoot)整合Spring-Session实现共享session

    传统Spring 先引入依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...

  6. [转帖]进程状态的转换与PCB详解

    进程状态的转换与PCB详解 https://blog.csdn.net/qq_34666857/article/details/102852747 挺好的 之前没好好学习.   返回主目录 ​ 之前的 ...

  7. springboot yml配置文件注入值

    1.编写javabean: package com.example.springboot.bean; import org.springframework.boot.context.propertie ...

  8. kubernetes 1.15 有哪些让人眼前一亮的新特性?

    原文链接:kubernetes 1.15 有哪些让人眼前一亮的新特性? 2019 年 6 月 20 日,Kubernetes 重磅发布了 1.15 版本,不过笔者忙到现在才有空认真来看一下到底更新了哪 ...

  9. sqlserver读取日志以及复制

    首选,在事务日志中,到底有多少是需要复制的?使用以下命令,可以确定事务日志中被标志为复制的命令有多少. USE test GO SELECT count(*) FROM ::fn_dblog(NULL ...

  10. python 搭建 websocket server 发送 sensor 数据

    搞了几天,顺便把代码贴这里,需要的 python 包: gevent,gevent-websocket,bottle,wiringpi-python 简单说明: - gevent 提供了支持 conc ...