参考链接：https://juejin.im/post/5b651dc15188251aa30c8669

参考链接：https://www.jb51.net/article/158818.htm

在我们前端开发中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

通常这种情况下我们怎么去解决的呢？

一般来讲，防抖和节流是比较好的解决方案。

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

函数防抖

定义：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。举个例子，当你在页面中使用onkeyUp监听用户在input框中的输入，如果用户按住一个6不放，那监听事件岂不是一直被触发，这样就浪费了一部分性能了，那么我们在一定事件内监听，也就是说我过了一秒再来看看你输入了多少个6，那这样是不是轻松多了。

原理：维护一个计时器，规定在延时时间后触发函数，但是在延时时间内再次被触发的话，就取消之前的计时器而重新设置，这样就能够保证只有最后一次操作被触发。即将所有操作合并为一个操作进行，并且只有最后一次操作是有效操作。

防抖函数分为非立即执行版和立即执行版。

非立即执行版：

触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>防抖</title>

</head>

<body>

 <button id="debounce">防抖，防抖，防抖</button>

 <script>

 window.onload = function () {

  let obtn = document.getElementById('debounce'); //获取按钮

 obtn.addEventListener('click',debounceHandle(debounce,500),false); //监听绑定事件

 }

 //防抖函数

function debounceHandle(func, delay) {

  let timer = null;

  return function(...args) {

    if (timer) clearTimeout(timer);//如果存在事件就清除定时器

    timer = setTimeout(() => {//如果不存在那么就开启定时器

      func.apply(this, args);

    }, delay);

  };

};

 //执行函数

 function debounce() {

  console.log('防抖,这里可以写一些防抖函数，如img中的onload事件');

 }

 </script>

</body>

</html>

立即执行版:

触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。
<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>防抖</title>

</head>

<body>

 <button id="debounce">防抖，防抖，防抖</button>

 <script>

 window.onload = function () {

  let obtn = document.getElementById('debounce'); //获取按钮

 obtn.addEventListener('click',debounceHandle(debounce,500),false); //监听绑定事件

 }

 //防抖函数

function debounceHandle(func, delay) {

    let timer = null;

    return function(...args) {

      if (timer) clearTimeout(timer);

      let callNow = !timer;

      timer = setTimeout(() => {

        timer = null;

      }, delay);

      if(callNow) func.apply(this, args);

    };

};

 //执行函数

 function debounce() {

  console.log('防抖,这里可以写一些防抖函数，如img中的onload事件');

 }

 </script>

</body>

</html>

上述防抖函数的代码还需要注意的是 this 和 参数的传递。是为了让 debounceHandle 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。

函数节流

定义：当持续触发事件时，保证一定时间段内只调用一次事件处理函数，按照一定的规律在某个时间间隔内去处理函数。假如在一个页面中有任意多张图片，那么就有可能会使用懒加载技术，譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，而不是只有当我停止下滑时候，图片才被加载出来。那么节流就是在一定时间间隔内触发一次事件。

原理：原理是通过判断是否达到一定时间来触发函数，使得一定时间内只触发一次函数。

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>节流</title>

 <style>

 div {

  height: 5000px;

 }

 </style>

</head>

<body>

 <div>节流,节流,节流</div>

 <script>

 window.onload = function () {

  window.addEventListener('scroll',throttleHandle(throttle),false); //监听绑定事件

 }

 //节流函数

 function throttleHandle (fn) {

  let timer = null,

   booleanVal = true; // 声明一个变量标志做判断

  return function () {

   if (!booleanVal) {

   return

   } //如果事件正在执行，那么就返回，将布尔值改为false

   booleanVal = false;

   //事件未执行，创建事件

   timer = setTimeout(function() {

   fn.apply(this,arguments);

   booleanVal = true; //事件执行完将布尔值改回

   },300)

  }

 }

 //执行函数

 function throttle() {

  var scrollNum = document.documentElement.scrollTop || document.body.scrollTop;

  console.log(scrollNum);

 }

 </script>

</body>

</html>

　　

　　

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

  1. JS函数防抖与函数节流

    概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执 ...

  2. js中实现函数防抖跟函数节流

    最近刚接触两个新概念函数防抖与函数节流,虽然这些内容网上可以搜到很多,大家都有自己的一套的理解方式,都写得很好, 而自己则想在理解的基础上自己把代码实现一遍,加深印象. 一.函数防抖 假如我们有这样的 ...

  3. 微信小程序之使用函数防抖与函数节流

    函数防抖和函数节流都是老生常谈的问题了.这两种方式都能优化 js 的性能.有些人可能会搞混两个的概念.所以,我以自己的理解,来解释这两个概念的含义.并且列举在小程序中这两个方法的使用. 函数防抖: 英 ...

  4. 函数防抖VS函数节流

    (1)函数防抖debounce 函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数 机制: 防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行: ...

  5. Vue函数防抖和函数节流

    函数防抖(debounce) 应用场景 登录.发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防 ...

  6. 前端常见原生方法的实现（bind，promise，new，extends，深拷贝，函数防抖，函数节流）

    前端原生方法的实现,这里写一下常见的一些实现: 1.bind Function.prototype.bind2 = function (context) { var self = this; retu ...

  7. 函数防抖与函数节流 封装好的debounce和throttle函数

    /** * 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 wait,func 才会执行 * * @param {function} func 传入函数,最后一个参数是额外增加的this对象,. ...

  8. 【javascript】js中的函数节流和函数防抖

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

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

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

随机推荐

  1. 【剑指Offer】60、按之字形顺序打印二叉树

    题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. 题解:BFS 主要的方法与BFS写法没什么区 ...

  2. Firefox下载.net服务器文件时中文乱码

    ASP.NET中产生一个Excel报表,供浏览器下载.显然,下载时经常有汉字报表名称.针对当前的两个主流的浏览器IE和Firefox,似乎没有兼容的解决办法.网上搜索了一些解决方法,但在Firefox ...

  3. PAT (Advanced Level) Practice 1011 World Cup Betting (20 分) （找最值）

    With the 2010 FIFA World Cup running, football fans the world over were becoming increasingly excite ...

  4. EOFError: Compressed file ended before the end-of-stream marker was reached解决办法（在Windows下查看已下载的MNIST数据文件）

    出现这个问题的原因是因为文件下载到一半就中断了,解决办法是删除datasets中下载到一半的数据包. 下面以我遇到的问题为例: 我下载数据下载到最后一个包就没有反应了,于是我强制终止了运行,可能是因为 ...

  5. 【并发那些事】线程有序化神器CompletionService

    前言 话说有一天,产品经理突然找到正在摸鱼的你. 产品:『我们要加一个聚合搜索功能,当用户在我们网站查询一件商品时,我们分别从 A.B.C 三个网站上查询这个信息,然后再把得到的结果返回给用户』 你: ...

  6. knitr::kable实现结构化展示数据

    一般做检验,直接会summary结果,通常情况下,会看到很多很多,口区~ 如何提取有用的信息,然后结构化展示数据呢? kable函数了. 我先给出学长给我的一部分,回头整理好了再补充 culture_ ...

  7. Silver Cow Party POJ - 3268

    #include<iostream> #include<queue> #include<cstring> using namespace std; +,INF=0x ...

  8. 记录 shell学习过程（11 ) shell 对输出流的处理

    语法 awk  [options] [BEGIN] {program} [END] [file] 常用命令选项 -F fs 指定描绘一行中数据字段的文件分隔符 默认为空格 -f file 指定读取程序 ...

  9. webservice后台起调试

    https://blog.csdn.net/smile00_0/article/details/72763114

  10. python3练习100题——036

    原题链接:http://www.runoob.com/python/python-exercise-example36.html 题目:求100之内的素数. 之前有类似的题,所以这次遇到觉得很容易了, ...