如题 (总结要点)

  • 防止重复点击！
  • 最近项目中遇见这个“函数抖动”的问题！快速点击前端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. 【p6spy学习之一】p6spy使用

    一.介绍 p6spy是一个开源项目,通常使用它来跟踪数据库操作,查看程序运行过程中执行的sql语句.1.原理 p6spy将应用的数据源给劫持了,应用操作数据库其实在调用p6spy的数据源,p6spy劫 ...

  2. IE 浏览器设置 打开新的选项卡而不是弹出窗口

    首先打开IE的页面  找到工具 —点击Internet选项

  3. 解决ios环境下点击输入框页面被顶起不能自动回弹到底部问题

    第一步:在标签的输入框中添加获取焦点事件  代码写法: @focus="getFocus" (vue代码)  可直接拷贝拿去放在自己页面元素中,如下: <div class= ...

  4. .Net Core 基于 SnmpSharpNet 开发

    SNMP简介(百度百科): SNMP 是专门设计用于在 IP 网络管理网络节点(服务器.工作站.路由器.交换机及HUBS等)的一种标准协议,它是一种应用层协议. SNMP 使网络管理员能够管理网络效能 ...

  5. package.json中dependencies 与devDependencies 的区别

    首先,dependencies中安装的依赖是生产环境的依赖,即项目要运行所必须安装的包:devDependencies中安装的的依赖是开放环境的依赖,即在开发项目时需要安装的依赖. 其次,在安装依赖的 ...

  6. eclipse配置lombok插件

    下载lombok-1.16.12.jar包 然后将包添加到eclipse.ini 同级目录下 打开eclipse目录:最后两行添加如下配置: -Xbootclasspath/a:lombok-1.16 ...

  7. 图论 --- BFS + MST

    Borg Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7844   Accepted: 2623 Descrip ...

  8. SpringCloud 基础

    目录 SpringCloud 基础 一.概述 二.服务发现组件 Eureka 1. 介绍 2. 搭建 Maven 父工程 3. 创建 Eureka 集群 4. 创建服务提供方集群 5. 创建服务消费方 ...

  9. springboot处理date参数

    前言 最近在后台开发中遇到了时间参数的坑,就单独把这个问题提出来找时间整理了一下: 正文 测试方法 bean代码: public class DateModelNoAnnotation { priva ...

  10. 一个萝卜一个坑#我的C坑_两局变量

    前面的笔记慢慢补 全局变量和局部变量的区别: 1.首字母 尽量不用全局变量原因: 1.占内存 2.降低通用性和可靠性 3.降清晰度 若在同一源文件中,全局变量和局部变量同名,记住很重要的一条:实参决定 ...