参考链接：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锁机制深入理解

    Java锁机制 背景知识 指令流水线 ​ CPU的基本工作是执行存储的指令序列,即程序.程序的执行过程实际上是不断地取出指令.分析指令.执行指令的过程. ​ 几乎所有的冯•诺伊曼型计算机的CPU,其工 ...

  2. A*模板（求K短路）（POJ2449）

    A*是bfs的优化,IDA*是dfs的优化 A*算法: 为启发式算法中很重要的一种,被广泛应用在最优路径求解和一些策略设计的问题中.而A*算法最为核心的部分,就在于它的一个估值函数的设计上: f(n) ...

  3. laravle中orm简单的增删改查

    友情提示请在有laravel基础的情况下观看文章 1.数据库信息(user表) CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, ...

  4. Hangfire设置隔天的指定时间执行

    一.说明 一开始只需要每天执行指定的备份逻辑,后来需求变更为间隔X天的指定时间执行备份操作,于是有了本篇文章所述的操作. 二.代码 1.先执行间隔天数的逻辑. 2.当到达要备份的当天时,再添加一个任务 ...

  5. css总结 -使用display：inline-block，出现元素高度错位

    在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致,发生错位.   <style>   .left{   display:inline-block;   height:110p ...

  6. UI中class的用法：

    easyui的引入:<link rel="stylesheet" type="text/css" href="easyui/themes/def ...

  7. 2019-08-18 纪中NOIP模拟A组

    T1 [JZOJ6309] 完全背包 题目描述

  8. Treats for the Cows POJ - 3186 dp 区间dp

    //dp[i][j]表示第i次从左边取,第j次从右边取的价值,所以我们可以得到状态方程 //dp[i][j]=max(dp[i-1][j]+(i+j)*a[i],dp[i][j-1]+(i+j)*a[ ...

  9. nginx反向代理https访问502, nginx反向代理, 支持SNI的https回源,SNI源点，nginx反向代理报错

    正常nginx配置了SSL是可以通过HTTPS访问后端的,但是对有配置SNI + https后端的支持有点麻烦. 编译安装nginx后,看一下是否支持SNI /usr/local/nginx/sbin ...

  10. PP: Robust Anomaly Detection for Multivariate Time Series through Stochastic Recurrent Neural Network

    PROBLEM: OmniAnomaly multivariate time series anomaly detection + unsupervised 主体思想: input: multivar ...