debounce(防抖) 与 throttle(节流) 主要是用于用户交互处理过程中的性能优化。都是为了避免在短时间内重复触发(比如scrollTop等导致的回流、http请求等)导致的资源浪费问题。

debounce与throttle的区别主要在于：

1. debounce是通过设置定时器，在延迟的时间内每次触发都会重置定时器，直到在某个延迟时间点内不再触发事件才会执行。

2. throttle也是通过设置定时器，只是在延迟时间内用户只有首次触发是有效的，其他触发都是无效的，只有等延迟时间到了才会执行该事件。

理论有点枯燥，直接看代码：

 <!DOCTYPE html>

 <html>

 <head>

     <title>debounce</title>

     <style type="text/css">

         #box {

             width: 300px;

             height: 150px;

             border: 1px solid #eee;

             background-color: #e3e3e3;

         }

     </style>

 </head>

 <body>

     <div id="box"></div>

     <script type="text/javascript">

         let divEle = document.querySelector('#box');

         let count = 0;

         divEle.addEventListener('mousemove', debounce(cbFn, 1000));

         function debounce(callback, delay) {

             let timer = null;

             return function() {

                 timer && clearTimeout(timer);

                 timer = setTimeout(function(){

                     callback.apply();

                 }, delay)

             }

         }

         function cbFn() {

             divEle.innerHTML = ++count;

         }

     </script>

 </body>

 </html>
 <!DOCTYPE html>

 <html>

 <head>

     <title>throttle</title>

     <style type="text/css">

         #box {

             width: 300px;

             height: 150px;

             border: 1px solid #eee;

             background-color: #e3e3e3;

         }

     </style>

 </head>

 <body>

     <div id="box"></div>

     <script type="text/javascript">

         let divEle = document.querySelector('#box');

         let count = 0;

         divEle.addEventListener('mousemove', throttle(cbFn, 1000));

         function throttle(callback, delay) {

             let preTime = new Date().getTime();

             return function() {

                 const now = new Date().getTime();

                 if (now - preTime > delay) {

                     preTime = now;

                     setTimeout(function() {

                         cbFn();

                     }, delay)

                 }

             }

         }

         function cbFn() {

             divEle.innerHTML = ++count;

         }

     </script>

 </body>

 </html>

js 防抖 debounce 与 节流 throttle的更多相关文章

  1. 防抖debounce和节流throttle

    大纲 一.出现缘由 二.什么是防抖debounce和节流throttle 三.应用场景 3.1防抖 3.2节流 一.出现缘由 前端开发中,有一部分用户行为会频繁触发事件,而对于DOM操作,资源加载等耗 ...

  2. js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...

  3. js 函数的防抖(debounce)与节流(throttle)

    原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...

  4. Java版的防抖(debounce)和节流(throttle)

    概念 防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时. 防抖,即如果短时间内大量触发同一事件,都会 ...

  5. 防抖(Debounce)与节流( throttle)区别

    http://www.cnblogs.com/ShadowLoki/p/3712048.html http://blog.csdn.net/tina_ttl/article/details/51830 ...

  6. JavaScript 防抖(debounce)和节流(throttle)

    防抖函数 触发高频事件后,n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 /** * * @param {*} fn :callback function * @param {* ...

  7. C#.Net下的防抖-Debounce和节流阀-Throttle功能实现

    C#下的防抖-Debounce.节流阀-Throttle功能实现 防抖-Debounce 连续的多次调用,只有在调用停止之后的一段时间内不再调用,然后才执行一次处理过程. 节流阀-Throttle 连 ...

  8. JS中的函数节流throttle详解和优化

    JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...

  9. JS 防抖函数和节流函数

    文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...

随机推荐

  1. dedecmsV5.7织梦后台更新文章，发布时间不自动更新

    问题:dedecmsV5.7后台修改文章的时候,会更新发布时间,需求是不自动更新时间,还是当时的发布时间 解决: 1.修改后台文件夹/templets/archives_edit.htm,articl ...

  2. CentOS 7系统上制作Clonezilla（再生龙）启动U盘并克隆双系统

    笔记本安装的是双系统:Win7 64位,CentOS 7 64位. 政采就是个巨大的坑,笔记本标配的是5400转的机械硬盘,开机时间常常要一至两分钟,软件运行起来时各种数据的读写也非常慢,忍无可忍,决 ...

  3. Win10系列：C#应用控件进阶10

    EllipseGeometry EllipseGeometry控件可以用于绘制椭圆,通过定义EllipseGeometry控件的Center属性确定椭圆的圆心坐标,使用此控件的RadiusX 和Rad ...

  4. PROJ.4学习——坐标系转换

    PROJ.4学习——坐标系转换 前言 PROJ可以做任从最简单的投影到许多参考数据非常复杂的转换.PROJ最初是作为地图投影工具开发的,但随着时间的推移,它已经发展成为一个强大的通用坐标转换引擎,可以 ...

  5. sed应用

    删除每行空白字符 sed -i 's/^[[:space:]]*//' user.txt 删除空白行 sed -i '/^$/d' user.txt

  6. fiddler 4 设置代理

    Windows使用一种被称为“AppContainer”的隔离技术,它可能会干扰lmmersive应用程序和Edge浏览器的流量捕捉.使用进度Telerik Fiddler的工具栏上的WinConfi ...

  7. springboot秒杀课程学习整理1-4

    1)商品模型设计 (应该是先设计商品的model,然后才是数据库表) 模型字段(id,title,price(double),stock(库存),description,sales,imgUrl) 创 ...

  8. NFS, web,负载均衡，Nginx yum 源码安装

    作业一:nginx服务1.二进制安装nginx 2.作为web服务修改配置文件 3.让配置生效,验证配置  [root@localhost ~]# systemctl stop firewalld.s ...

  9. 低版本IDE 打开 高版本 IDE 代码时 unit

    可以用单元别名 比如Vcl.Forms=Forms 来兼容.

  10. C# [GDI+] [API] Get Image bytes Length

    MemoryBMP "{b96b3caa-0728-11d3-9d7b-0000f81ef32e}" 2 Bmp "{b96b3cab-0728-11d3-9d7b-00 ...