参考链接：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. Java第四节课总结

    动手动脑1:如果类提供了一个自定义的构造方法,将导致系统不再提供默认构造方法.Foo obj1=new Foo()在此处调用应增加参数. 动手动脑2:静态初始化块只执行一次.创建子类型的对象时,也会导 ...

  2. CodeForces - 1105D 多源搜索

    #include<bits/stdc++.h> using namespace std; typedef long long ll; struct node{ int x,y; ll se ...

  3. Pair类模板

    >Pair的实现是一个结构体而不是一个类< 1.标准头文件 #include<utility> 似乎无需引入该文件,在std命名空间内也有pair类型 2.格式为:templa ...

  4. 从首个IMO季军谈起 作者 : 付云皓

    刚刚过去的IMO,中国史无前例地获得了第三名,也是自1997年来近20年首次跌出前二.感谢微信等社交软件,相信现在这个新闻已经以火箭的速度传播了. 作为一个与数学竞赛及IMO打了多年交道的人,我一直有 ...

  5. win10中安装jdk1.8

    一.JDK下载 两种方法,第一种是从官网下载:第二种是拿来主义,小拿直接给你网盘地址.不过,作为java新手,最好还是学会去官网下载. 官网下载的文件才是最安全的,从不靠谱第三方下载有可能安装包有缺失 ...

  6. Maven的作用

    Maven的作用 1.在开发中,为了保证编译通过,我们会到处去寻找jar包,当编译通过了,运行的时候,却发现"ClassNotFoundException",我们想到的是,难道还差 ...

  7. H5_0014：background-size设置

    2,background-position

  8. source insight增加tab标签页的方法之sihook

    1.效果如下 2.方法见如下博客 http://www.cnblogs.com/Red_angelX/archive/2013/01/23/2873603.html

  9. Prettier - Code formatter使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 Prettier - Code formatter这是一款 格式化js.css代码插件,暂不解释. Prettier是什么? Prettier ...

  10. var s=+newDate();

    var s=+newDate(); 解释如下:=+是不存在的; +new Date()是一个东西; +相当于.valueOf(); 看到回复补充一下.getTime()这个也是得到毫秒数 //4个结果 ...