函数节流与函数防抖 函数节流和函数防抖是一个老生常谈的话题了，两者都是对大量频繁重复调用代码的一种优化方案 今天在某群和大家讨论时，顺便搜了一些相关博客 发现有一篇关于两者的定义竟然写反了。。。所以
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
前端开发者对函数防抖和函数节流或多或少有些了解，最近在做一个H5编辑器的项目，由于画布功能复杂，计算量较大，在鼠标拖拽操作时尤其是在低配电脑上能够明显感受到卡顿，自然联想运用函数防抖(debounce)和函数节流(throttle)来优化 mousemove 等实时计算方法的计算频率再合适不过了。
应用情景 经典使用情景：js的一些事件，比如：onresize、scroll、mousemove、mousehover等； 还比如：手抖、手误、服务器没有响应之前的重复点击； 这些都是没有意义的，重复的无效的操作，设置对整个系统的影响还可能是致命的，所以我们要对重复点击的事件进行相应的处理！ 节流函数 所谓的节流函数顾名思义，就是某个时刻限制函数的重复调用。 同样节流函数也是为了解决函数重复提交的问题，而防止重复提交的方法，不止节流函数一种实现。 方法汇总 本文整理了我在工作实践当中，觉的防止js重复提交，
太多的人拥挤到站台上，大家都想搭上这班车，人挤人之间，难免会出现一些问题。 所以在很多地铁站，高峰期会设置很多层的屏障，来增加你进站的时间，从而减少站台的压力。
前端开发中会遇到一些频繁的事件触发，像是resize、scroll、mousedown、mousemove、keyup、keydown等。
本专栏主要是一些实用技巧，带大家灵活运用、并理解其思想；另外后续也会开设js核心知识方面的专栏带大家深入理解js这门语言。由于个人刚完成js阶段的学习，却没有什么项目经验，另外感觉自己基础也不是很好；所以梳理了下js学习过程中个人认为必须掌握的一些知识点、技巧等，以此为后期的学习打下坚实的基础。
函数节流和去抖的出现场景，一般都伴随着客户端 DOM 的事件监听。举个例子，实现一个原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路监听 mousemove 事件，在回调中获取元素当前位置，然后重置 dom 的位置（样式改变）。如果我们不加以控制，每移动一定像素而触发的回调数量是会非常惊人的，回调中又伴随着 DOM 操作，继而引发浏览器的重排与重绘，性能差的浏览器可能就会直接假死，这样的用户体验是非常糟糕的。我们需要做的是降低触发回调的频率，比如让它 500ms 触发一次，或者 200m
节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
在实际开发中，我们会遇到这么一个场景：我们需要注册一个事件，但有时候这个事件会在短时间内频繁触发，事件频繁的执行会导致浏览器进行大量的计算而引发页面卡顿假死的情况，为些我们需要通过一些手段来解决这个问题，所以就有了防抖和节流这两个技术。
问题提出： 假如你要提交一个表单，你点击了按钮，出发了提交操作。这时候，你的网络不太好，提交的请求还没得到返回的时候，你又点击了一次按钮，提交了两次，怎么办，又点击了一下，提交了三次，怎么办？
我们可以将这个定义进行一下拆分： 1、所谓函数节流指的就是一个函数。 2、该函数的执行需要一个周期进行控制。 3、周期内调用该函数不执行，否则会执行。
防抖函数，我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生，在定时器期间事件再次触发的话则清除重置定时器，直到定时器到时仍不被清除，事件才真正发生。
防抖：在任务频发的情况下，在任务触发的间隔超过设定的间隔的时候，任务才会执行，即被调用的函数在一次连续的高频操作中只被调用一次。
个人理解 函数节流就是fps(射击)游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。
https://github.com/ZengLingYong/Blog/issues/21
在 Google I/O ’17 上，Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。
节流指的都是某个函数在一定时间间隔内只执行第一次回调。举个常见的节流案例：我们把某个表单的提交按钮——button 设成每三秒内最多执行一次 click 响应；当你首次点击后，函数会无视之后三秒的所有响应；三秒结束后，button 又恢复正常 click 响应功能，以此类推。
比如说吃饭。吃饭说明规定，五个小时吃一次。吃了一次饭，小狗蹦蹦哒哒地玩了五个小时。五个小时一到， 小狗再回来吃饭。依次类推，每五小时回来吃一次饭。
今天为大家带来一篇JS重难点的知识体系，这也是前端高薪必备的重难点知识，而且防抖与节流在各大企业前端面试过程中经常会考到的高频面试题！
在写JS时，这两个函数比较常见，有时候傻傻分不清用哪个，或者说知道代码要怎么写，但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分，我也来回顾一下，加深一下印象，以便日后用到时心里有底。PS：百度和谷歌搜索前几个介绍都是相反介绍，本文为原创，如有雷同纯属抄袭我的。
好吧，一直在秋招中，都没怎么写博客了。。。今天赶紧来补一补才行。。。我发现，在面试中，讲到函数节流好像可以加分，尽管这并不是特别高深的技术，下面就聊聊吧! ^_^ 备注：以下内容部分来自《JavaScript高级程序设计》 函数节流的目的 从字面上就可以理解，函数节流就是用来节流函数从而一定程度上优化性能的。例如，DOM 操作比起非DOM 交互需要更多的内存和CPU时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生，
函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。 节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。
前面的文章《函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用》中讲过，对于 mousemove, scroll 这类事件，一般的解决方法是使用 throttle 节流函数，但是节流函数解决这类问题并不完美，存在两点缺陷：
b.输入框事件：验证手机号或者邮箱，用户输入时不断触发键盘事件，应该等用户结束输入之后，以最后一次输入为准
函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。 大家大概都知道旧款电视机的工作原理，就是一行行得扫描出色彩到屏幕上，然后组成一张张图片。由于肉眼只能分辨出一定频率的变化，当高频率的扫描，人类是感觉不出来的。反而形成一种视觉效果，就是一张图。就像高速旋转的风扇，你看不到扇叶，只看到了一个圆一样。 同理，可以类推到js代码。在一定时间内，代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多，带来的效果也是一样。倒不如，把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源，又能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。
当用户频繁的与UI界面操作交互时,例如:窗口调整(触发resize),页面滚动,上拉加载(触发scroll),表单的按钮提交,商城抢购疯狂的点击(触发mousedown),而实时的搜索(keyup,input),拖拽等
第一章聊了【“为什么要进行服务化，服务化究竟解决什么问题”】 第二章聊了【“微服务的服务粒度选型”】 今天开始聊一些微服务的实践，第一块，RPC框架的原理及实践，为什么说要搞定微服务架构，先搞定RPC
今天开始聊一些微服务的实践，第一块，RPC框架的原理及实践，为什么说要搞定微服务架构，先搞定RPC框架呢？
区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。
使用场景：click、onMouseOver，onMouseMove，resize，input，scroll等
1. 滚动加载: 监听页面滚动到底部的时候触发 2. 拖拽场景: 固定时间只执行一次，防止高频率的位置变动
在 JavaScript 中，防抖和节流其实是一个很重要的概念。主要应用场景就是会频繁触发的事件，比如监听滚动、点赞功能，总不能点一次赞就向后台发送一次数据，这时候就要用到防抖和节流。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
上面有个问题就是如果再场景2那种情况，用户提交数据请求是发不出去的。而且不停点击，请求就一直不发，这显然是不科学的，我们就要改进这个函数了。
上面提到了函数调用频次, 这个频次也就是调用时间, 所以在underscore中关于throttle函数是基于定时器与时间差来调用函数运行的频次。还有就是throttle函数接收三个参数, 关于最后一个参数我到最后再讲。 我们看下源码:
函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
作者：前端林子 https://cloud.tencent.com/developer/article/1380512
https://github.com/mqyqingfeng/Blog/issues/26
可以看到，我们只要输入一个字符，就会触发这次ajax请求。不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求。下面我们优化一下：
防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间
什么是javascript函数节流？从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数，通过设置定时器，使其在执行后间隔一段时间，才进行下一次的执行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。 函数节流的经典应用场景：onresize，scroll，mousemove ,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTimeout定时器，通过设置缓冲时间，在第一次调用时，创建定时器，并在定时时间
函数节流的经典应用场景：onresize，scroll，mousemove ,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTimeout定时器，通过设置缓冲时间，在第一次调用时，创建定时器，并在定时时间结束调用。第二次调用时，会清除前一个定时器并设置新的定时器。如果这时前一个定时器暂未执行，则将其替换为新的定时器。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用。我们看一个简单实现。
props与state都是用于组件存储数据的一js对象,前者是对外暴露数据接口,后者是对内组件的状态,它们决定了UI界面显示形态,而若想要用户与界面有些交互动作
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发 scroll 事件时，并不执行 handle 函数，当 1000 毫秒内没有触发 scroll 事件时，才会延时触发 scroll 事件。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
