如题 (总结要点)

  • 防止重复点击！
  • 最近项目中遇见这个“函数抖动”的问题！快速点击前端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. eclipse.ini相关问题

    一般新装的eclipse,在eclipse.ini文件中,有设置默认的内存信息,如果你要开发一个大的项目或者导入大的项目,那么,eclipse就会时不时报出这样的错误:An internal erro ...

  2. python 计算列表内容出现次数

    """python 计算列表内容出现次数""" #方法一: l = ['a','a','b','c','d','b','b','b'] te ...

  3. [Atcoder AGC032C]Three Circuits

    题目大意:有一张$n$个点$m$条边的无向连通图,判断是否可以从中分出$3$个环,满足三个环覆盖整张图并且没有重复的边.$n,m\leqslant10^5$ 题解:分类讨论.有度数为奇肯定不行,因为连 ...

  4. Web API 授权筛选器

    方式一.全局认证 public static class WebApiConfig { public static void Register(HttpConfiguration config) { ...

  5. ERP会计科目表初始化

    2019会计科目表 一.资产类 顺序号 编号 会计科目名称 会计科目适用范围 顺序号 编号 会计科目名称 会计科目适用范围 1 1001 库存现金 38 1431 周转材料 建造承包商专用 2 100 ...

  6. ReactiveObjC basic

    基础-> https://www.jianshu.com/p/cd4031fbf8ff 在RAC中,万物皆信号. RAC 指的就是 RactiveCocoa ,是 Github 的一个开源框架, ...

  7. 编写可维护的JavaScript-随笔（五）

    事件处理 当事件触发时,事件对象(event对象)会作为回调参数传入事件处理程序中,event对象包含所有和事件相关的信息 function handleClick(event){ var popup ...

  8. JavaScript数据类型和语法

    第一章 类型 1.2 内置类型 使用 typeof 检测对象类型并不是非常安全的行为: // 安全的 typeof undefined // 'undefined' typeof true // 'b ...

  9. Python - 实现矩阵转置

    有个朋友提出了一个问题:手头上现在有一个二维列表,比如[[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]],现在要把该二维列表变成为[[1, 4, 7, 10 ...

  10. Js编程实践

    js编程实践思维导向图 ---欢迎收藏 ^ - ^