参考链接：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. 浏览器console控制台不显示编译错误/警告

    浏览器正常显示报错应该是这样的 ,但是我一不小心右键给Hide message from...了,红色报错字体就没了,解决方法如下: 直接将红色框内的内容叉掉,恢复成filter就OK了

  2. PAT (Basic Level) Practice （中文）1064 朋友数 (20 分) （set）

    如果两个整数各位数字的和是一样的,则被称为是“朋友数”,而那个公共的和就是它们的“朋友证号”.例如 123 和 51 就是朋友数,因为 1+2+3 = 5+1 = 6,而 6 就是它们的朋友证号.给定 ...

  3. HDU - 1159 Common Subsequence （最长公共子序列）

    A subsequence of a given sequence is the given sequence with some elements (possible none) left out. ...

  4. 1级搭建类105-Oracle 19c 单实例 FS（19.3+RHEL 8）公开

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...

  5. StaticFileMiddleware 解析

       说明:由于部分产品没有静态资源的管理,我突然想到能不能用现有的静态文件中间件的功能调整一下实现多组织件上传文件的隔离呢?那第一步先看懂   StaticFileMiddleware做了什么吧. ...

  6. Dubbo-服务注册中心之AbstractRegistryFactory等源码

    在上文中介绍了基础类AbstractRegistry类的解释,在本篇中将继续介绍该包下的其他类. FailbackRegistry 该类继承了AbstractRegistry,AbstractRegi ...

  7. HDU2612 Find a way （双广搜）

    Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. Leave Ningbo one year ...

  8. C++-POJ3735-Training little cats[矩阵乘法][快速幂]

    矩阵快速幂,主要是考构造.另外,swap总是写龊? 为什么?干脆放弃了.唉,我太难了. 思路:操作e和s都很好想,主要是g操作 我们可以额外空出一位,记为1,每次要加1,就对这个额外的1进行计算即可 ...

  9. dubbo的服务consumer与provider使用的api版本不一致，是否有影响

    dubbo的服务consumer与provider使用的api版本不一致,是否有影响 最近新接手一个项目,看到定义的dubbo接口有些很奇葩的设定. 一.消费端 与 服务端 调用的接口中的数据包装类型 ...

  10. Vue.js 源码目录设计（二）

    Vue.js 的源码都在 src 目录下,其目录结构如下. src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── se ...