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

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

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

举两个简单的小例子：

节流：

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

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

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

 <!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. git克隆远程仓库的时候断电了，使用git-fetch断点续传

    今天下载tensorflow serving 模型,但是因为主机电源线太长了,不知是我自己搞的还是同事,断电了都, 网速捉急,下载了挺长时间的,一看,git clone 到中途竟然断电,不过查看,还好 ...

  2. Unity中的点击，长按，划动

    public void GetClickType() { if(Input.GetMouseButtonDown(0)) { if(isGetBeginPos) { beginPosition = I ...

  3. 十九、State 状态模式

    原理: 代码清单: Context public interface Context { void setClock(int hour); void changeState(State state); ...

  4. http://ctf.bugku.com/challenges#Mountain%20climbing:bugku--Mountain-Climbing

      分析这道题,爽,能够结合IDA和ollydbg分析代码,美滋滋.但如果以后能直接根据汇编容易地看懂逻辑那就更好了. 参考链接: https://blog.csdn.net/cossack9989/ ...

  5. C语言变量声明内存分配

    转载: C语言变量声明内存分配   一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 程序运行时由编译器自动分配,存放函数的参数值,局部变量的值等.其操作方式类似于数据结 ...

  6. Easyui datagrid 绑定本地Json数据

    var jsonstr = '{"total":1,"rows":[{"id":"M000005","name ...

  7. 93. Restore IP Addresses产生所有可能的ip地址

    ［抄题］: Given a string containing only digits, restore it by returning all possible valid IP address c ...

  8. Django中操作Redis

    一 创建redis连接池 redis_pool.py pool = redis.ConnectionPool(host='10.211.55.4', port=6379) 二 引入连接池 import ...

  9. Java Token的原理和生成使用机制

    在此之前我们先了解一下什么是Cookie.Session.Token 1.什么是Cookie? cookie指的就是浏览器里面能永久存储数据的一种数据存储功能.cookie由服务器生成,发送给浏览器, ...

  10. Python 多个分隔符 读取逗号和空格分开的数据

    str.split()  清除默认 空格和tab  对空格数量不敏感 str.split(' ') 只清除一个空格     对空格数量敏感 l = re.split('[^0-9.]+',s.stri ...