首先 我们要知道 节流与防抖可以干什么。

优化网络请求性能——节流

优化页面请求性能——防抖

举两个简单的小例子：

节流：

例如 有些购物页面，会有一些让你抢购的活动，到点的时候，需要你快速的点某个按钮，来抢购，

如果没有添加节流，那么你的页面，每点击一次，网络就会请求一次，更可恶的是，还有一些用鼠

标连点器来抢购，这时，节流就派上用场了。 我可以设置，一秒内，你只能点击一次，  效果如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <div id="num">0</div>

     <button id="btn">click</button>

     <script>

         var oDiv = document.getElementById("num");

         var oBtn = document.getElementById("btn");

         function throttle(handler, wait){// 第一次参数为主要函数，第二个参数为毫秒

             var lastTime = 0;//记录过去的时间

             return function(){

                 var nowTime = new Date().getTime(); //获取时间戳

                 if(nowTime - lastTime > wait){

                 //用时间戳记录当前时间，当前时间 减去 上一次的时间，如果大于 wait(你设置的 1000毫秒) 说明 过去1000毫秒了，

                 //用户可以点击第二次了。

                     handler.apply(this, arguments)//执行 主要函数， 但是此时的 handler函数的this指向window，也

                                                 //没有事件源对象， apply改变this 指向oBtn，传入 事件源 arguments[0]  (e)

                     lastTime = nowTime;//主要函数执行后， 当前时间就成了过去的时间了。

                 }

             }

         }

         oBtn.onclick = throttle(buy, 1000);

         function buy(){

             oDiv.innerText = parseInt(oDiv.innerText) + 1;

             //每触发一次，内容 + 1

         }

     </script>

 </body>

 </html>

防抖：

请看上面的gif图，有没有发现，用户在输入， 还在不停输入的时候， 事件一直触发， 但是实际上，

并不需要它一直触发，我们需要的是，用户在停止输入的时候，才触发事件。 加入防抖，

效果图如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <input type="text" id="inp">

     <script>

         var oInp = document.getElementById("inp");

         function debounce (handler, delay){//第一个参数，主要函数，第二个参数为毫秒

             var timer = null;

             return function (){

                 var _self = this, //获取this

                 _arg = arguments;//获取事件源对象，(e)

                 clearTimeout(timer);

                 timer = setTimeout(function(){

                     handler.apply(_self, _arg);//执行主要函数，此时的handler函数this指向window，

                                                 //用apply改变this指向和传入事件源对象

                 },delay)

             }

         }

         function ajax (e){//模拟ajax

             console.log(this.value);

             console.log(e); //输出到控制台，看看事件源对象 是否为input

         }

         oInp.oninput = debounce(ajax, 1000);//绑定事件

     </script>

 </body>

 </html>

javaScript 节流与防抖的更多相关文章

  1. [JavaScript] 节流(throttle)-防抖(debounce) 不懵圈指北

    网易云课堂 > 微专业 > 前端高级开发工程师 01.前端高级-JavaScript进阶 > 3.函数式编程 Underscore源码分析 > 3.4.3 throttle 与 ...

  2. JavaScript节流与防抖函数封装

    js节流与防抖函数封装 常见应用场景: window的 resize 和 scroll 事件: 文字输入时的 keyup 事件: 元素拖拽.移动时的 mousemove 事件: 防抖 定义:多次触发事 ...

  3. javaScript节流与防抖

    一.节流(throttle) 用来实现阻止在短时间内重复多次触发同一个函数.主要用途:防止使用脚本循环触发网络请求的函数的恶意行为,确保请求的真实性(当然也包括其他阻止高频触发行为的应用): 实现原理 ...

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

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

  5. JavaScript 中的防抖和节流

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

  6. JavaScript中的节流和防抖

    节流: 在规定时间内,多次触发事件,但是只执行一次 场景:输入框搜索,地图渲染 优化用户体验 /** * 节流 规定时间内不管触发多少次只执行一次 * @param {Function} fn 实际要 ...

  7. JavaScript中函数防抖、节流

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

  8. JS节流和防抖

    事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresize.window.mousemove等,触发的频率非 ...

  9. JS定时器实现函数节流和防抖 -简单实现对比 -适用地方

    如题 (总结要点) 防止重复点击! 最近项目中遇见这个"函数抖动"的问题!快速点击前端xx按钮,造成数据多次加载进页面里,正常只显示10条数据,结果显示了20条数据,异常! 出现原 ...

随机推荐

  1. Hibernate 再接触 事务隔离机制

    事务:要么都要完成,一个不完成就要回滚. ACID 原子性 一致性 独立性 持久性 第一类丢失更新 第一类丢失更新 脏读(读了另外一个事务没有提交的数据) 不可重复读(在同一个事务里,对数据库里的值前 ...

  2. html语义化练习易牛课堂代码

    html <body>     <header>         <!-- 导航 -->         <nav> <a href=" ...

  3. vivo手机，自带世界之窗浏览器，sessionStorage设置的值为null

    最近遇到一个小问题 用vivo手机自带浏览器,每次跳转到一个新页面都是重新打开一个webpage,导致sessionStorage设置的值都没了. 所以开发移动端网页时,谨慎使用sessionStor ...

  4. java学习笔记（三）：类和对象

     创建对象 构造器 每一个类都有一个构造器. 如果我们不单独为一个类编写构造器那么 Java 的编译器将会给这个类建立一个默认的构造器. 每当一个新的对象被创建,至少一个构造器将会被调用. 构造器的一 ...

  5. dagScheduler

    由一个action动作触发sparkcontext的runjob,再由此触发dagScheduler.runJob,然后触发submitJob,封装一个JobSubmitted放入一个队列.然后再通过 ...

  6. Python开发【第八篇】：socket网络编程

    服务端: import socket server = socket.socket() #绑定要监听的端口 server.bind(('localhost',6969)) #监听 server.lis ...

  7. Python项目--Scrapy框架(二)

    本文主要是利用scrapy框架爬取果壳问答中热门问答, 精彩问答的相关信息 环境 win8, python3.7, pycharm 正文 1. 创建scrapy项目文件 在cmd命令行中任意目录下执行 ...

  8. 微信小程序之---- 数据处理

    exports 关键字      .wxs 通过该属性,可以对外共享本模块的私有变量与函数   使用步骤 1. 在 .wxs后缀文件 exports定义参数 var foo = "'hell ...

  9. java重写equals方法需要注意的几点

    为什么equals()方法要重写? 判断两个对象在逻辑上是否相等,如根据类的成员变量来判断两个类的实例是否相等,而继承Object中的equals方法只能判断两个引用变量是否是同一个对象.这样我们往往 ...

  10. 【转】Cron表达式详解

    Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: (1) Seconds Minutes Hours DayofMonth Mo ...