1.直接上码

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>debounce-throttle</title>

     <script type="text/javascript">

         //节流函数：时间戳节流，规定时间内一定执行一次

         function throttle(fn, delay){

             var prev = Date.now();

             return () => {

                 var context = this,args = arguments;

                 var now = Date.now();

                 if(now - prev >= delay){

                     fn.apply(context, args);

                     prev = Date.now();

                 }

             };

         }

         //节流函数：定时器节流，规定时间内一定执行一次

         function _throttle(fn, delay){

             var timer;

             return () => {

                 var context = this,args = arguments;

                 if(!timer){

                     timer = setTimeout(function(){

                         fn.apply(context, args);

                         timer=null;

                     },delay);

                 }

             };

         }

         //事件触发时立即执行，触发完毕还能执行一次的节流函数：

         function __throttle(fn, delay){

             var timer,prev = Date.now();

             return () => {

                 var context = this,args = arguments;

                 var now = Date.now();

                 clearTimeout(timer);

                 if(delay - (now - prev) <= 0){

                     fn.apply(context, args);

                     prev = Date.now();

                 }else{

                     timer = setTimeout(function(){

                         fn.apply(context, args);

                     },delay);

                 }

             };

         }

         //防抖函数：规定一定时间后只执行一次fn

         function debounce(fn, delay){

             var timer;

             return () => {

                 var context = this,args = arguments;

                 clearTimeout(timer);

                 timer = setTimeout(function(){

                     fn.apply(context, args);

                 },delay);

             };

         }

         //防抖函数：立即执行然后一定时间后只执行一次fn

         function _debounce(fn, delay, flag){

             var timer;

             return () => {

                 var context = this,args = arguments;

                 clearTimeout(timer);

                 if(flag){

                     var now = !timer;

                     timer = setTimeout(function(){

                         timer = null;

                     },delay);

                     if(now){

                         fn.apply(context, args);

                     }

                 }else{

                     timer = setTimeout(function(){

                         fn.apply(context, args);

                     },delay);

                 }

             };

         }

         function printLog(){

             var date = new Date();

             var second = date.getSeconds(),milliseconds=date.getMilliseconds();

             console.log('printLog:'+second+' ' +milliseconds);

         }

         window.onload = function(){

             document.getElementById('div').addEventListener('click', throttle(printLog,1000));

         }

     </script>

 </head>

 <body>

     <div id="div" style="width:200px;height:160px;background-color: yellow;"></div>

 </body>

 </html>

2.总结

防止一个事件频繁触发回调函数的方式：
防抖动：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
节流：使得一定时间内只触发一次函数。
它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。
原理是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。

3.参考资料

https://blog.csdn.net/crystal6918/article/details/62236730

http://www.ptbird.cn/javascript-anti-shake-throttle.html

JavaScript防抖节流函数的更多相关文章

  1. JS基石之-----防抖节流函数

    防抖和节流函数   阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别   一.防抖函数 1.1 概念: 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算 ...

  2. vue防抖节流函数---组件封装,防止按钮多次点击

    1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...

  3. vue 防抖节流函数——组件封装

    防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 节流(throttle) 所谓节流,就是指连续触发事件但是在 ...

  4. Javascript中 节流函数 throttle 与 防抖函数 debounce

    问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...

  5. 【跟着大佬学JavaScript】之lodash防抖节流合并

    前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...

  6. vue实现输入框的模糊查询（节流函数的应用场景）

    上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到 ...

  7. 详解防抖函数（debounce）和节流函数（throttle）

    本文转自:https://www.jianshu.com/p/f9f6b637fd6c 闭包的典型应用就是函数防抖和节流,本文详细介绍函数防抖和节流的应用场景和实现. 函数防抖(debounce) 函 ...

  8. Javascript性能优化之节流函数

    在我们的工作中往往有这样的需求,下拉上拉加载实现无限加载列表数据这样的一个功能,这个时候小伙伴们可能就觉得这个功能几分钟的事,于是乎,下边这段代码浩浩荡荡就出来了 window.addEventLis ...

  9. JS奇淫巧技：防抖函数与节流函数

    应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整 ...

随机推荐

  1. 【Java】代理模式、反射机制-动态代理

    关于代理模式和动态代理参考自:https://www.cnblogs.com/gonjan-blog/p/6685611.html 这里通过参考博客中的例子整理个人理解. 代理模式: 访问某个类的方法 ...

  2. java利用反射获取对象前后修改的内容（用于日志记录）

    import java.beans.PropertyDescriptor; import java.lang.reflect.Field; import java.lang.reflect.Metho ...

  3. Postgresql之VACUUM和VACUUM FULL对比

    VACUUM命令存在两种形式,VACUUM和VACUUM FULL,它们之间的区别见如下表格: 无VACUUM VACUUM VACUUM FULL 删除大量数据之后 只是将删除数据的状态置为已删除, ...

  4. 第33章：MongoDB-索引--GridFS存储文件

    ①简介 GridFS是MongoDB用来存储大型二进制文件的一种存储机制.特别适合用在存储一些不常改变,但是经常需要连续访问的大文件的情况. ②GridFS的优点 1:能够简化技术栈,如果已经使用了M ...

  5. JavaScript基础视频教程总结（021-030章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. _ZNote_Qt_QtCreator_Tips_粘贴_历史剪切板

    发现 快捷键 Shift+Command + V 能够出现历史剪切板. 厉害了我的歌

  7. AdminLTE用django部署

    前言 最近从网上看到AdminLTE这个web前端的主题挺好的,我平时用python就是写一些后台,准备以后就用这个框架了,这里就是把这个用django初始化一下这个项目. 基础环境介绍 Python ...

  8. InstallShield 创建 visual studio 工程的时候 指向 任意 visual studio 版本 方法 (修改 计算机 默认 visual studio shell 版本)

    这需要 修改 计算机 默认 visual studio shell 版本 注册表 HKEY_CLASSES_ROOT VisualStudio.DTE 配置节点 描述的是 默认的 visual stu ...

  9. AJPFX：什么是外汇交易

    外汇交易是对货币对的一种买卖,是以一个国家货币与另外一个国家货币进行交换,即您在买入一国货币的同时,您也卖出了另一国的货币.所以在外汇市场上,人们的交易对象就是“货币对“,比如欧元/美元,美元/日元, ...

  10. SVM理解

    https://blog.csdn.net/feilong_csdn/article/details/62427148