如题 (总结要点)

  • 防止重复点击！
  • 最近项目中遇见这个“函数抖动”的问题！快速点击前端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. highcharts实现组织机构的点击选中和取消选中事件

    代码   Highcharts.chart('container', { chart: { height: 600, inverted: true }, title: { text: 'Highsof ...

  2. Struts2利用iText导出word文档（包含表格）以提供下载

    J2EE ExcelStrutsXML  在公司实习期间,带我的老师让我实现一功能——在显示课表的页面上上点击“导出文件“时能以word文档形式下载课表.将课表导出到excel里的功能他们已经实现了, ...

  3. Elasticsearch 7.1.1 安装 pinyin 分词器插件

    1.安装maven 安装插件前,需要用 maven 进行编译生成插件包,第一步先安装 maven yum install -y maven mvn -version Apache Maven (Red ...

  4. unity延迟加载图片

    把加载图片所需要的信息封装成一个任务(自己写的类,包括路径,回调等信息),再将该任务添加到自己写的任务池中(在update中执行任务委托),由于只是添加任务操作,加载完成后自动调用回调函数实例化,对主 ...

  5. redux本来是同步的为什么它能执行异步代码（chunk）实现原理是什么 中间件的实现原理是什么

    我们用redux执行同步的时候,都是先发起一个dispatch(actionCreator()) 1.先在actionCreator()中生成一个action对象. 2.由dispatch方法将act ...

  6. BussinessSkinForm 入门教程

    BussinessSkinForm 入门教程 By 刘家君(qufo) 作者:刘家君 工作单位:福建省 泉州鹭燕医药有限公司 职务:网络管理员 网名:qufo Mail:qufo@tom.com,qu ...

  7. 解决新版本R3.6.0不能加载devtools包问题

    首先是看到下面这个文章想试着练习一下,结果第一步就卡住了,无法加载devtools包,繁体字都冒出来了......汗!(没有截图,但过程痛苦不堪~) https://www.sohu.com/a/12 ...

  8. - Gradle 翻译 Analyzer APK文件分析 MD

    目录 目录 APK文件分析 使用 APK 分析器分析您的编译版本 查看文件和大小信息 查看 AndroidManifest.xml 查看 DEX 文件 过滤DEX文件树视图 加载 Proguard 映 ...

  9. 【LeetCode】48. Rotate Image

    Difficulty:medium  More:[目录]LeetCode Java实现 Description https://leetcode.com/problems/rotate-image/ ...

  10. LeetCode-SQL(一)

    1.组合两个表 表1: Person +-------------+---------+| 列名         | 类型     |+-------------+---------+| Person ...