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. leveldb 学习记录(五)SSTable格式介绍

    本节主要记录SSTable的结构 为下一步代码阅读打好基础,考虑到已经有大量优秀博客解析透彻 就不再编写了 这里推荐 https://blog.csdn.net/tankles/article/det ...

  2. vue中的import、export、requre的区别

    在es6之前js一直没有自己的模块语法,为了解决这种尴尬就有了require.js的出现.在es6发布之后js又引入了import的概念使得不清楚两者之间的区别的同学在实际使用过程中造成了自己的误解, ...

  3. Python 语法提示vim配置

    1. pydiction 2. 默认 Vim 7.xx以上版本 python_pydiction.vim -- Vim plugin that autocompletes Python code. c ...

  4. 【Selenium】【BugList2】geckodriver未安装，报：WebDriverException: Message: 'geckodriver' executable needs to be in PATH.

    环境信息:Windows7 64位 + python 3.6.5 + selenium 3.11.0 +pyCharm #coding=utf-8 from selenium import webdr ...

  5. C++标准库第二版笔记 1

    C++标准库第二版笔记 1 C++ std历史 第一份标准化文档: C++98 & C++03 & TR1 TR1 Information Technology- Programmin ...

  6. VM下载安装

    VM下载 VM是一款收费软件,要找有密钥的下载. 我的网盘 > 软件 > 常用电脑工具 > VM VM安装 参考链接中的安装步骤 http://blog.java1234.com/b ...

  7. ScriptOJ-safeGet#99

    const safeGet = (data, path) => { if(!path) return undefined; const pathArr = path.split('.'); le ...

  8. Crontab定时执行Oracle存储过程

    Crontab定时执行Oracle存储过程 需求描述 我们有一个Oracle的存储过程,里面是每个月需要执行一下,生成报表,然后发送给业务部门,这一个功能我们有实现在系统的前台界面(如图1-1),但是 ...

  9. git 删除本地分支、远程分支、本地回滚、远程回滚

    一. git 删除分支 1. git 删除本地分支 git branch -D branchname 2. git 删除远程分支 git push origin :branchname (origin ...

  10. MySQL--运维内参中的binlog_summary脚本

    #!/bin/bash ##===================================================## ## 脚本出自<MySQL运维内参> ##===== ...