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. Could not transfer artifact org.springframework

    无法从中心仓库获取该版本的信息, 从新下载: 1.配置eclipse中的maven  user setting路径为本地maven安装路径 配置阿里云镜像路径 <mirror> <i ...

  2. 转载-对js中new、prototype的理解

    说明:本篇文章是搜集了数家之言,综合的结果,应向数家致谢 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: <script type="text/java ...

  3. tensorflow学习之（一）预测一条直线y = 0.1x + 0.3

    #预测一条y = 0.1x + 0.3的直线 import tensorflow as tf import numpy as np #科学计算模块 ''' tf.random_normal([784, ...

  4. 《Linux就该这么学》今天开课了-Linux的发展，起源

    秦时明月当中的经典语录:失败的人只有一种,就是在抵达成功之前放弃的人——盖聂 想到这里我只想说,决定一件事,就要坚持,或许结局并不美好,但过程值得回忆

  5. ABP框架系列之五十二：(Validating-Data-Transfer-Objects-验证数据传输对象)

    Introduction to validation Inputs of an application should be validated first. This input can be sen ...

  6. C#常用代码(更新中)

    文件(夹)的相关操作 新建文件夹 If(!Directory.Exist(路径)) Directory.CreateDirectory(路径); 删除文件夹 Directory.Delete(路径,t ...

  7. 剪格子 dfs 蓝桥杯

    问题描述 如下图所示,3  x  3  的格子中填写了一些整数. +--*--+--+ |10*  1|52| +--****--+ |20|30*  1| *******--+ |  1|  2|  ...

  8. 20155326刘美岑 Exp6 信息收集与漏洞扫描

    20155326刘美岑 Exp6 信息收集与漏洞扫描 实验后回答的问题 (1)哪些组织负责DNS,IP的管理. 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和IP地 ...

  9. noip第15课资料

  10. Java连接MySQL数据库详细教程（附网盘下载地址）

    准备工具 Eclipse-oxygen-64位 http://pan.baidu.com/s/1gf48FIj MySQL-5.7.17 http://pan.baidu.com/s/1skD14Cl ...