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. python_day11

    一.简介 1.什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 2.关系型数据库 ...

  2. MongoDB学习记录(一) - 安装、启动与建立数据库

    简要说明一个基本概念:MongoDB中的三要素:数据库(database).集合(collection)和文档(document). 文档:类似于JSON对象,由字段(field)和值(value)组 ...

  3. PAT 1088 三人行 模拟,坑 C

    PAT 1088 三人行 https://pintia.cn/problem-sets/994805260223102976/problems/1038429286185074688 题目: 子曰:“ ...

  4. ABP框架系列之十一：(AspNet-Core-ASPNET核心)

    Introduction This document describes ASP.NET Core integration for ASP.NET Boilerplate framework. ASP ...

  5. Educational Codeforces Round 62 (Rated for Div. 2) C 贪心 + 优先队列 + 反向处理

    https://codeforces.com/contest/1140/problem/C 题意 每首歌有\(t_i\)和\(b_i\)两个值,最多挑选m首歌,使得sum(\(t_i\))*min(\ ...

  6. IDA显示字节机器码

    默认居然不显示,有点坑. 要像CE一样显示出来,需要 菜单 Options >> General Disassembly选项卡Number of opcode bytes写上非0,写1好像 ...

  7. jquery print属性设置

    一,需求背景 项目中遇到打印功能,想实现完美的打印功能,对元素进行操作等,可以使用jquery print 插件. 二,依赖文件  git地址请戳这里 1,jquery 2,jquery.print- ...

  8. Oracle DBLINk的使用

    Oracle中自带了DBLink功能,它的作用是将多个oracle数据库逻辑上看成一个数据库,也就是说在一个数据库中可以操作另一个数据库中的对象,例如我们新建了一个数据database1,我们需要操作 ...

  9. Beta冲刺 （7/7）

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1:(组长)柯奇豪 过去两天完成了哪些任务 部分代码的整合 编辑文章部分的完成 ...

  10. Android-普通变量与普通方法内存图

    描述Worker对象: package android.java.oop11; // 描述Worker public class Worker { public String name; public ...