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

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

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

举两个简单的小例子：

节流：

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

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

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

 <!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. Nginx 工作原理

    Nginx 工作原理 Nginx由内核和模块组成. Nginx本身做的工作实际很少,当它接到一个HTTP请求时,它仅仅是通过查找配置文件将此次请求映射到一个location block,而此locat ...

  2. JQuery/JS插件 数组转换为Table

    //数组 转换为 table var arr = [{ "D_AlarmValue": 7.00, "D_Code": "002", &qu ...

  3. mallo

    http://luleimi.blog.163.com/blog/static/175219645201302295042968/

  4. SVG绘制太极图

    思路:先画一整个圆,填充颜色为黑色,再用一个边框和填充颜色均为白色的长方形覆盖右半边的半圆,再以同一个圆心,相同半径绘制一整个圆,该圆的边线颜色为黑色,没有填充颜色,最后常规操作再画四个小圆 源代码: ...

  5. window.innerWidth和document.body.clientWidth的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. DJango 基础 (3)

    模板路径 在配置文件setting.py中找到TEMPLATES设置来配置. 这是一个设置选项的列表,模板大都包含两项通用设置:两种方式配置模板: 第一种: DIRS 定义一个目录列表,模板引擎按列表 ...

  7. HTML中的Meta标签详解

    emta标签的组成:meta标签分两大部分:HTTP-EQUIV和NAME变量. HTTP-EQUIV:HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显 ...

  8. [Java核心技术]第四章-对象与类(4.1-4.6总结)

    4.1面向对象程序设计概述 OOP(面向对象编程Object Oriented Programming) OOP中数据第一位,算法第二位. 类 封装:关键在于不能让其他方法直接访问类的实例域,程序仅通 ...

  9. 通过类名或者jar名查询所在jar包

    一.问题 例如我想查看一下FilterSecurityInterceptor的源码,但是我不知道它在maven依赖中的哪个jar包中 二.解决方案 http://www.findmaven.net/ ...

  10. sql中with as测试实例

    一.使用场景 1.多处使用才有必要2.一方面减少代码数量便于理解维护3.一方面跟代码一样一次计算到处用 二.实例(本处示例仅为测试,实际用join比较好) 1.不使用with as 2.使用with ...