如题 (总结要点)

  • 防止重复点击！
  • 最近项目中遇见这个“函数抖动”的问题！快速点击前端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. Tarjan 算法求 LCA / Tarjan 算法求强连通分量

    [时光蒸汽喵带你做专题]最近公共祖先 LCA (Lowest Common Ancestors)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili tarjan LCA - YouTube Tarj ...

  2. | C语言I作业02

    C语言I博客作业02 标签: 18软件2班 李煦亮 问题 答案 这个作业属于那个课程 C语言程序设计I 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/C ...

  3. Windows域的创建与加入教程

    一.说明 以前看书的时候时常看到“域”这个词,后来听一些渗透的演讲通常会说进入内网后首先要找域控.在认知中“域控”应该是域管理服务器一类的东西,但毕竟没有实现过所以还是不太懂长什么样. 前段时间朋友电 ...

  4. 【chromium】 渲染显示相关概念

    DRM(Direct Rendering Manager) DRM 由两个部分组成:一是 Kernel 的子系统,这个子系统对硬件 GPU 操作进行了一层框架封装.二是提供了一个 libdrm 库,里 ...

  5. 【转】潜说js对象和数组

    /* 数组和对象 [JavaScript 权威指南 第五版] */ /* 对象: 是一个无序属性集合, 每个属性都有自己的名字和值 */ /* 创建对象简单方法, 对象直接量 */ var obj = ...

  6. FusionInsight大数据开发---MapReduce与YARN应用开发

    MapReduce MapReduce的基本定义及过程 搭建开发环境 代码实例及运行程序 MapReduce开发接口介绍 1. MapReduce的基本定义及过程 MapReduce是面向大数据并行处 ...

  7. python turtle画花

    turtle是一个功能强调大的绘图的库,可以用来绘制各种所需要的图案,但是在使用时需要计算好角度等一系列的问题. 代码(源自<Python语言程序设计>)如下: 运行结果:

  8. String类的方法应用

    String类的几个方法的应用示例: using System;using System.Collections.Generic;using System.Linq;using System.Text ...

  9. Redis常用配置和命令总结

    Redis(全称:Remote Dictionary Server 远程字典服务)是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言 ...

  10. Linux环境下：vmware安装Windows报错误-无人参与应答文件包含的产品密钥无效

    最近在安装window server 2012 R2的时候,输入好密钥可以继续安装,但在后面又提示我“无人参与应答文件包含的产品密钥无效.删除无效的密钥或在无人参与应答文件中提供有效的产品密钥继续进行 ...