如题 (总结要点)

  • 防止重复点击！
  • 最近项目中遇见这个“函数抖动”的问题！快速点击前端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. HttpClient代理IP及设置连接读取超时

    1.不废话,上代码: public static void main(String[] args) throws Exception { CloseableHttpClient httpClient ...

  2. Spring Cloud Zuul 精进

    接着上一篇继续讲Zuul,上一篇搭建了Zuul的环境简单说明了怎么使用,本篇查缺补漏将一些常用的配置贴出来.文末我们会一起分析一下Zuul的源码,升华一下本篇的格调! 忽略所有微服务或某些微服务 默认 ...

  3. C# 激活主窗口

    今天同学跟我说了一个bug,虽然很简单,但还是记录一下,也好让我养成写东西的习惯. C# windows form 程序中,发生某个事件时,需要自动弹出一个窗口,提示用户,并等待用户输入进行处理. 如 ...

  4. JConsole远程配置

    JConsole是JDK自带的内存监控工具 1.linux配置tomcat-9.x 修改setenv.sh文件(默认没有的,需自己创建),增加配置: #!/bin/sh JAVA_HOME=/usr/ ...

  5. 学习Linux要知道的知识点总结

    1 如何查看Linux的user和hostname? (1)打开终端查看 终端左侧的root@zlkj:~$,前面的root为user - 用户名,后面的zlkj为hostname - 主机名. (2 ...

  6. Keras 使用过程问题汇总

    以下是Keras 使用过程出现的一些问题: (1)Keras 后端选择问题 一开始是选用的Theano,结果迭代一轮所花时间很长: 后面改用:TensorFlow作为后端,结果果然变快了: 改完Ten ...

  7. Postman接口测试【3】_自动添加随笔

    一.抓取博客园编写博客地址 1.通过Charles抓取,获取到编写博客接口地址和接口的参数 二.Postman请求接口 打开Postman,输入上面抓到的接口地址,接口类型为POST,请求参数为x-w ...

  8. 模拟 + 暴搜 --- Help Me with the Game

    Help Me with the Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3175   Accepted: ...

  9. 『线段树及扫描线算法 Atlantis』

    入门看这边『线段树 Segment Tree』. 扫描线 扫描线是一种解决一类平面内统计问题的算法,通常会借助线段树来实现,我们通过一道例题来引入这个算法. Atlantis Description ...

  10. mycat在windows环境下安装和启动

    1.下载从如下地址下载mycat的安装包: http://www.mycat.io/ eg:Mycat-server-1.6.6.1-release-20181031195535-win.tar.gz ...