什么是防抖？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. C#输出26个大写字母

    C#输出26个大写字母,较快的方法:

  2. oracle创建表的方法和一些常用命令

    1.主键和外键主键:关系型数据库中的一条记录中有若干个属性,若其中的某一个属性组(注意是组,可以是一个,也可以是多个)能唯一标识一条记录,那么该属性组就是主键外键:关系型数据库表中的一列或者某几列的组 ...

  3. [日常] Go语言圣经-匿名函数习题2

    练习5.13: 修改crawl,使其能保存发现的页面,必要时,可以创建目录来保存这些页面.只保存来自原始域名下的页面.假设初始页面在golang.org下,就不 要保存vimeo.com下的页面. p ...

  4. Spring全家桶系列–SpringBoot与Mybatis结合

    //本文作者:cuifuan Mybatis 是一个持久层ORM框架,负责Java与数据库数据交互,也可以简易理解为中介,相对于它,还有个中介是hibernate,不过在mybatis中sql语句的灵 ...

  5. HDU1816(二分+2-SAT)

    Get Luffy Out * Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  6. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  7. Angular 中引入BootStrap

    由于Bootstrap官方目前并没有发布Angular的相关类库进行支持,当前Angular只能引用使用Bootstrap相关的样式.无法使用Bootstrap自带的脚本逻辑.以下以Angular7和 ...

  8. HTML初学小技巧

    01.让背景图不滚动IE浏览器支持一个 Body 属性 bgproperties,它可以让背景不滚动:〈Body Background="图片文件" bgproperties=&q ...

  9. element-ui Pagination组件源码分析整理笔记（七）

    element-ui源码的版本是2.4.9 pagination.js import Pager from './pager.vue'; import ElSelect from 'element-u ...

  10. git使用相关记录

    上传github操作记录:https://blog.csdn.net/pql925/article/details/72772660 git提交仓库相关:https://blog.csdn.net/M ...