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

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

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

举两个简单的小例子：

节流：

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

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

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

 <!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. 爬虫 1 requests 、beautifulsoup

    1.requests 1.method 提交方式:post.get.put.delete.options.head.patch 2.url 访问地址 3.params 在url中传递的参数,GET p ...

  2. R语言-优化作图

    par()函数:用来设置画图参数的函数par()的作用直到画板被关闭为止 1.设置背景颜色 #设置背景颜色 > par(bg="gray") #设置画板背景色 > pl ...

  3. python 内置元祖子类

    a = (zhangsan,20,nv,123@163.com) 输出姓名 a[0] 输出年龄 a[1] 输出性别 a[2] ..... 这样写可读性非常低 使用 内置元祖子类 from collec ...

  4. 监测SQLServer数据库中表的数据变化 方案

    sqlDependency提供了这样一种能力:当被监测的数据库中的数据发生变化时,SqlDependency会自动触发OnChange事件来通知应用程序,从而达到让系统自动更新数据(或缓存)的目的. ...

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

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

  6. Es6（Symbol，set，map，filter）

    首先再讲这几个新东西之前,先说一个Es6中新出的扩展运算符(...) 1.展开运算符,就是把东西展开,可以用在array和object上 比如: let a=[,] let b=[,...a,]//[ ...

  7. git tag的用法

    我们常常在代码封板时,使用git 创建一个tag ,这样一个不可修改的历史代码版本就像被我们封存起来一样,不论是运维发布拉取,或者以后的代码版本管理,都是十分方便的 git的tag功能 git 下打标 ...

  8. vm ware虚拟机ping不通解决办法

    本人是linux菜鸟,在使用vm ware的时候,在多台电脑上安装了多个虚拟机,这多台电脑是同一网段的,并且能够互相ping通,但是vm ware下的虚拟机就无法ping通 通过自己的各种才是,发现在 ...

  9. Pycharm中选择Python解释器

    新建项目后,有时候Pycharm找不到Python解释器,如果找不到的话,就会报错.报错信息: No python interpreter configured for the project 找到P ...

  10. Android如何在http头信息里设置参数

    在使用http请求server时常常要传递一些参数给server,如IMEI号.平台号.渠道号.客户端的版本号等一些通用信息,像这些参数我们没有必要每次都拼在url后,我们可以统一添加到http头里. ...