什么是防抖？and什么是节流？一起来开心的学习下吧。

首先什么是防抖：就是在一定的时间内事件只发生一次，比如你点击button按钮，1秒内任你单身30年手速点击无数次，他也还是只触发一次。举个例子，当你在页面中使用onkeyUp监听用户在input框中的输入，如果用户按住一个6不放，那监听事件岂不是一直被触发，这样就浪费了一部分性能了，那么我们在一定事件内监听，也就是说我过了一秒再来看看你输入了多少个6，那这样是不是轻松多了。ok，解释清楚了那么就来看下代码，更加清晰。

<!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),false); //监听绑定事件

    }

    //防抖函数

    function debounceHandle (fn) {

      let timer = null;

      return function () {

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

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

          fn.call(this,arguments);

        },300)

      }

    }

    //执行函数

    function debounce() {

      console.log('防抖，防抖，防抖');

    }

  </script>

</body>

</html>

上面函数也就是在300毫秒内，只会触发一次事件。总结：防抖就是在任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

接下来什么是节流，假如在一个页面中有任意多张图片，那么就有可能会使用懒加载技术，懒加载呢就是监听滚动条的位置，那么如果用户一直在滚动，那么事件监听就一直在触发，也是浪费性能。那么节流就是在一定时间间隔内触发一次事件。话不多说，先看代码。

<!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中的防抖与节流函数

    1.何为防抖与节流函数呢? 1.防抖(debounce):通过setTimeout方式,在一定的时间间隔内,将多次触发的事件转化为一次触发.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于 ...

  2. JS中的防抖和节流

    JS-防抖和节流 在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和 ...

  3. JavaScript中函数防抖、节流

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14565642.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  4. JavaScript 中的防抖和节流

    什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...

  5. JS简单实现防抖和节流

    一.什么是防抖和节流 Ps: 比如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,那得消耗多大的服务器资源,即使你的服务器资源很强大,也不带这么玩的. 1. 防 ...

  6. 来聊聊JavaScript中的防抖和节流

    目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...

  7. 输入防抖 vue # 输入搜索的时候 及时搜索的快速访问接口的 解决方案 vue 中使用防抖和节流

    输入防抖 watch: { value (newVal, oldVal) { if (this.timer) { clearTimeout(this.timer) } this.timer = set ...

  8. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  9. 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...

随机推荐

  1. the first blog in 2017——《论作为程序员的我考研》

    怎么说,人总是有了压力才有动力.想来如今已经是2017年2月13日,2017年已经使用了43天,距离成绩出来还有3天.这个过年是最不充实的一个年,也是时间长达一个月久的“寒假”,因为“考研”.至于考到 ...

  2. Async和await关键字的用法

    async & await 的前世今生(Updated) 1. 方法打上Async关键字, 就可以使用await调用别的Async方法了 2. 记得在需要异步执行的方法里面调用await或者n ...

  3. openssh升级到openssh-7.5p1踩坑

    环境:ubuntu 需要的安装包: http://zlib.net/   zlib 1.2.11最新版 http://www.linux-pam.org/library/   pam 1.3.0 ht ...

  4. Redis字符串操作

      字符串命令 (基本用法) GET : 获取给定键的值 SET : 设置给定键的值 DEL : 删除给定键的值(这个命令可以用于任何类型) (自增命令和自减命令) INCR : INCR key-n ...

  5. SQL语句，表中的列字段字符串合并 和 字符串拆分成表

    研究了两天也没有研究的很明白,但是问题做出来了, 如下表中的字段,第一级是由逗号隔开字符串,第二级是由空格隔开的字符串,现在想取空格字符串中的第几个空格前后的字符串, 所用到的工具,1.是 for x ...

  6. 学习Memcached:2基本应用之控制台使用

    1.首先新建一个控制台应用. 2.将下载好需要引用的Memcached的Dll导入进来. 3.前期准备工作就结束了,其实很简单,memcache的配置使用是挺简单.下面就是写代码了. using Me ...

  7. [android] 切换按钮-自定义控件

    准备两张图片,按钮背景,上面的小开关 创建一个类MyToggleBtn,继承View 实现三个构造方法,传递上下文, 实现构造方法,传递Context对象,在java代码中实例化时主要使用这个 实现构 ...

  8. 数据库导入导出expdp，impdp

    数据库操作 (1)数据库导入导出expdp,impdp 在导入导出数据库的时候,经常会用到exp和imp,在数据量小的情况下可以随意使用,但是当数据量大,表中数据有百万,千万条的时候,就要等好久好久好 ...

  9. 七夕——来自google的一点轻松

    今天google在其hk主页推出了七夕主题的小游戏 先看看这个logo: 一共三轮 我的记录是7分21秒,还真是不容易

  10. atitit.交换机 汇聚上联、网络克隆和标准共享的原理与区别

    atitit.交换机 汇聚上联.网络克隆和标准共享的原理与区别 1. 标准共享(标准化模式)1 2. 汇聚上联trunk1 2.1. 使用场合1 2.2. 背景1 2.3. 实现原理2 3. 网络克隆 ...