参考链接：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. codeforces 1284E

    计数每一个点被被其他点组成的四边形完全包含的四边形的个数,给出的点没有三点共线的情况 官方题解如下,说的很清楚,也很有技巧 代码也是直接参考官方的题解来的 #include<bits/stdc+ ...

  2. gulp常用插件之yargs使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 yargs这是一款通过解析参数并生成优雅的用户界面来帮助您构建交互式命令行工具.处理命令行参数的通用解决方案,只要一句代码 var args = ...

  3. hdu 1005 Number Sequence（循环节）

    题意,f(1)=1,f(2)=1,f(n)=a*f(n-1)+b*f(n-2),求f(n)%7 这个题可能数据不够严谨,所以有些错误的做法也可以通过,比如7 7 50,应该输出0而不是1 解:找到关键 ...

  4. Python函数装饰器

    装饰器的原则 1)不修改被修饰函数的源代码: 2)不修改被修饰函数的调用方式: 装饰器的知识点 = 高阶函数 + 函数嵌套 + 闭包 1. 只用高阶函数写装饰器--->有瑕疵 import ti ...

  5. git在idea中使用

    (1)创建README.md文件 fengli@DESKTOP-FEQ1N4I MINGW32 /f/workspace/imallproject (master)$ touch README.md ...

  6. ArcMap 导出Table数据到Excel

  7. 题解 AT1812 【テレビ】

    题目大意 高桥君有一个宽\(w\),高\(h\)的电视机. 判定\(w:h\)是\(4:3\)还是\(16:9\). 分析 我们可以理解成把一个比\(w:h\)化为最简整数比,也就是将\(w:h\)化 ...

  8. [转]三分钟学会.NET Core Jwt 策略授权认证

    [转]三分钟学会.NET Core Jwt 策略授权认证 一.前言# 大家好我又回来了,前几天讲过一个关于Jwt的身份验证最简单的案例,但是功能还是不够强大,不适用于真正的项目,是的,在真正面对复杂而 ...

  9. 自定义Keras Layer

    Keras的Layer其实就是一个Class, 要具有以下几个方法: (1) build(input_shape): 定义权重的地方, 如果不需要定义权重, 也要有self.built = True; ...

  10. sift代码实现详解

    1.创建高斯金字塔第-1组 1.1.将源图片转成灰度图 void ConvertToGray(const Mat& src, Mat& dst) { cv::Size size = s ...