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

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

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

举两个简单的小例子：

节流：

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

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

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

 <!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. android rc文件分析

    service vold /system/bin/vold \        --blkid_context=u:r:blkid:s0 --blkid_untrusted_context=u:r:bl ...

  2. 初学JSON和AJAX心得透过解惑去学习

    虽然复制代码再改参数,也能正常运作.但是看懂里面语法,就可以客制成适合你自己程序.例如录制Excel巨集,会有一些赘句,这时候整合就是很重要工作. [大纲] 时间分配 AJAX Markdown教学及 ...

  3. 通过windows远程桌面连接CentOS系统

    前提: CentOS安装桌面,如果无桌面,请执行 # yum -y groups install "GNOME Desktop" # startx 1 2 配置源 # yum in ...

  4. 转 - spring security oauth2 password授权模式

    原贴地址: https://segmentfault.com/a/1190000012260914#articleHeader6 序 前面的一篇文章讲了spring security oauth2的c ...

  5. 深入JVM之类的加载器

    类加载器有两种: —java虚拟机的自带加载器 根类加载器(Bootstrap) 扩展类加载器(Extension) 系统类加载器(AppClassLoder) —自定义的类加载器 java.lang ...

  6. 199. Binary Tree Right Side View 从右侧看的节点数

    ［抄题］: Given a binary tree, imagine yourself standing on the right side of it, return the values of t ...

  7. eclipse中集成python开发环境

    转载:https://www.cnblogs.com/mywood/p/7272487.html Eclipse简介 Eclipse是java开发最常用的IDE,功能强大,可以在MAC和Windos上 ...

  8. 虚拟机下 centos7 无法连接网络

    [root@localhost ~]# cd /etc/sysconfig/network-scripts [root@localhost network-scripts]# ls ifcfg-ens ...

  9. Python开发——基础

    注释 单行注释 # 被注释的内容 多行注释 """ 被注释的内容 """ 解释器路径 #!/usr/bin/env python # 用于L ...

  10. Python开发——函数【Python内建函数】