函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。 大家大概都知道旧款电视机的工作原理，就是一行行得扫描出色彩到屏幕上，然后组成一张张图片。由于肉眼只能分辨出一定频率的变化，当高频率的扫描，人类是感觉不出来的。反而形成一种视觉效果，就是一张图。就像高速旋转的风扇，你看不到扇叶，只看到了一个圆一样。 同理，可以类推到js代码。在一定时间内，代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多，带来的效果也是一样。倒不如，把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源，又能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。
本专栏主要是一些实用技巧，带大家灵活运用、并理解其思想；另外后续也会开设js核心知识方面的专栏带大家深入理解js这门语言。由于个人刚完成js阶段的学习，却没有什么项目经验，另外感觉自己基础也不是很好；所以梳理了下js学习过程中个人认为必须掌握的一些知识点、技巧等，以此为后期的学习打下坚实的基础。
使用场景：click、onMouseOver，onMouseMove，resize，input，scroll等
b.输入框事件：验证手机号或者邮箱，用户输入时不断触发键盘事件，应该等用户结束输入之后，以最后一次输入为准
在实际开发中，我们会遇到这么一个场景：我们需要注册一个事件，但有时候这个事件会在短时间内频繁触发，事件频繁的执行会导致浏览器进行大量的计算而引发页面卡顿假死的情况，为些我们需要通过一些手段来解决这个问题，所以就有了防抖和节流这两个技术。
我们可以将这个定义进行一下拆分： 1、所谓函数节流指的就是一个函数。 2、该函数的执行需要一个周期进行控制。 3、周期内调用该函数不执行，否则会执行。
函数节流是减少函数的触发频率；函数防抖是延迟函数执行，且不管触发多少次都只执行最后一次
在使用小程序的时候会出现这样一种情况：当网络条件差或卡顿的情况下，使用者会认为点击无效而进行多次点击，最后出现多次跳转页面的情况，就像下图（快速点击了两次）：
为什么要函数节流 由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。 比如以下情况： 1. window对象的resize、scroll事件 2. 拖拽时的mousemove事件 3. 射击游戏中的mousedown、keydown事件 4. 文字输入、自动完成的keyup事件 再详细点： 我们定义了一个鼠标滚动事件 ： 我们的本意只是让鼠标滚动一次执行一次滚动函数，但是window的onscroll函数并不是等scroll结束之后才会调用，鼠标滚动或拖动滚动条，就会不停的触发scroll事件，如果处理的东西多，低版本的浏览器也会陷入假死状态。 解决办法： 函数节流 节流就像将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期 列举代码如下：
在 Google I/O ’17 上，Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。
我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响，尤其是在做一些效果实现方面，或者逻辑中需要进行后端请求，更是会导致卡顿，效果失效等结果，所以在处理类似的情况时，可以考虑使用函数节流和函数去抖来解决，至于具体使用哪一种方式，根据实际情况分析定夺,先来讲解一些这两者的概念,以下是我个人的一些看法,若有不足,希望大家可以提出.
当用户频繁的与UI界面操作交互时,例如:窗口调整(触发resize),页面滚动,上拉加载(触发scroll),表单的按钮提交,商城抢购疯狂的点击(触发mousedown),而实时的搜索(keyup,input),拖拽等
太多的人拥挤到站台上，大家都想搭上这班车，人挤人之间，难免会出现一些问题。 所以在很多地铁站，高峰期会设置很多层的屏障，来增加你进站的时间，从而减少站台的压力。
个人理解 函数节流就是fps(射击)游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。
节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
问题提出： 假如你要提交一个表单，你点击了按钮，出发了提交操作。这时候，你的网络不太好，提交的请求还没得到返回的时候，你又点击了一次按钮，提交了两次，怎么办，又点击了一下，提交了三次，怎么办？
函数节流与函数防抖 函数节流和函数防抖是一个老生常谈的话题了，两者都是对大量频繁重复调用代码的一种优化方案 今天在某群和大家讨论时，顺便搜了一些相关博客 发现有一篇关于两者的定义竟然写反了。。。所以
可以看到，我们只要输入一个字符，就会触发这次ajax请求。不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求。下面我们优化一下：
几天没有更新博客了，最近也没什么可忙的，今天我们说说js函数中常见的性能优化中的一个方式-函数节流！
props与state都是用于组件存储数据的一js对象,前者是对外暴露数据接口,后者是对内组件的状态,它们决定了UI界面显示形态,而若想要用户与界面有些交互动作
函数节流和去抖的出现场景，一般都伴随着客户端 DOM 的事件监听。举个例子，实现一个原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路监听 mousemove 事件，在回调中获取元素当前位置，然后重置 dom 的位置（样式改变）。如果我们不加以控制，每移动一定像素而触发的回调数量是会非常惊人的，回调中又伴随着 DOM 操作，继而引发浏览器的重排与重绘，性能差的浏览器可能就会直接假死，这样的用户体验是非常糟糕的。我们需要做的是降低触发回调的频率，比如让它 500ms 触发一次，或者 200m
前端开发者对函数防抖和函数节流或多或少有些了解，最近在做一个H5编辑器的项目，由于画布功能复杂，计算量较大，在鼠标拖拽操作时尤其是在低配电脑上能够明显感受到卡顿，自然联想运用函数防抖(debounce)和函数节流(throttle)来优化 mousemove 等实时计算方法的计算频率再合适不过了。
好吧，一直在秋招中，都没怎么写博客了。。。今天赶紧来补一补才行。。。我发现，在面试中，讲到函数节流好像可以加分，尽管这并不是特别高深的技术，下面就聊聊吧! ^_^ 备注：以下内容部分来自《JavaScript高级程序设计》 函数节流的目的 从字面上就可以理解，函数节流就是用来节流函数从而一定程度上优化性能的。例如，DOM 操作比起非DOM 交互需要更多的内存和CPU时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生，
什么是javascript函数节流？从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数，通过设置定时器，使其在执行后间隔一段时间，才进行下一次的执行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。 函数节流的经典应用场景：onresize，scroll，mousemove ,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTimeout定时器，通过设置缓冲时间，在第一次调用时，创建定时器，并在定时时间
函数防抖（debounce）当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。
上面提到了函数调用频次, 这个频次也就是调用时间, 所以在underscore中关于throttle函数是基于定时器与时间差来调用函数运行的频次。还有就是throttle函数接收三个参数, 关于最后一个参数我到最后再讲。 我们看下源码:
函数节流的经典应用场景：onresize，scroll，mousemove ,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTimeout定时器，通过设置缓冲时间，在第一次调用时，创建定时器，并在定时时间结束调用。第二次调用时，会清除前一个定时器并设置新的定时器。如果这时前一个定时器暂未执行，则将其替换为新的定时器。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用。我们看一个简单实现。
记录工作和学习中的一些可能会被面试问到的JS内部实现基础，由于笔者水平有限，提供出的答案不一定准确，但是原理尽可能会讲清楚，以后会进行逐步添加。 bind实现 bind实现其实是内部调用apply或者call来实现对象的this绑定，具体实现可以参考如下： var o = { a: 1, b: 2, print: function() { console.log(this.a); console.log(arguments); } }; va
上面有个问题就是如果再场景2那种情况，用户提交数据请求是发不出去的。而且不停点击，请求就一直不发，这显然是不科学的，我们就要改进这个函数了。
之所以返回一个函数，因为防抖本身更像是一个函数修饰，所以就做了一次函数柯里化。里面也用到了闭包，闭包的变量是timer。
原理：为传入的 obj 添加临时方法，然后去调用这个临时方法，这样子，这个方法的this就会指向调用它的对象了，最后还需要把临时方法删除掉。
在说underscore函数节流之前, 还是明确概念, 什么是函数节流。函数节流简单来说就是'开源节流', 什么意思呢？就是减少某个函数调用的太频繁, 降低频次。一般来讲, 对于dom的频繁操作会引起浏览器的重绘或者重排, 这个时候我们就可以来使用节流不要让他过快的操作dom, 从而页面渲染起来也会更加流畅。 举个场景: dom元素的移动与拖拽, 我默认都做过这个功能。对于dom元素的频繁拖拽, 对于一些性能不太好的浏览器(说的就是你IE)会有很大的损耗, 这个时候我们就可以适当的去降低这个事件的调用频次。 当然调用的频次也要有一个合适的阈值。不然也会引出意外的问题。。。
据说阿里有一道面试题就是谈谈函数节流和函数防抖。 糟了，这可触碰到我的知识盲区了，好像听也没听过这2个东西，痛定思痛，赶紧学习学习。here we go！
时长35分钟，感觉有点凉的面经 1.自我介绍balabala 2.先问几个基础的题目好了，线程和进程的区别 3.多核CPU中呢？单核呢？ 4.JS是单线程还是多线程的 5.为什么是单线程呢 6.什么是
函数防抖，就是指触发事件后在一定时间内函数只能执行一次，如果在这段时间内再次触发，则会重新计时，直到事件触发后一定时间内不再触发
这个方法接受你想防抖的函数以及他的上下文,然后在500ms延时之后执行这个函数,若下一次函数在500ms内调用则清除上个定时器然后在延迟500ms执行,函数防抖有效的防止了一个函数被多次调用,比如onresize,onmouseover和上述的键盘监听事件
什么是javascript函数节流？从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数，通过设置定时器，使其在执行后间隔一段时间，才进行下一次的执行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。
高阶函数 函数可以作为参数传递 函数可以作为返回值输出 函数作为参数传递 回调函数 在ajax异步请求的过程中，回调函数使用的非常频繁 在不确定请求返回的时间时，将callback回调函数当成参数传入
我们在对窗口的resize、scroll进行事件监听时，可能会导致事件处理函数被无限制调用，这样做会增加浏览器负担，如果事件处理函数有AJAX的话会造成无限次请求，给服务器也带来了负担。
函数防抖和函数节流是在前端性能优化中老生常谈的话题，也是各位前端的童鞋必须要掌握的性能优化手段。今天胡哥为大家分享函数防抖和函数节流的相关原理以及具体实践场景，希望能够给各位小伙伴在工作中提供相应业务场景的解决方案。
1、让连续执行的函数，变为固定时间段间断地执行。在一段频繁操作中，可以触发多次，但是触发的频率由自己指定。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
1、用时间戳判断是否已到回调执行时间，记录上次执行时间戳，然后每次触发事件时执行回调，回调判断当前时间戳距离上次执行时间戳的时间间隔是否为*s。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
