面试必问知识（防抖和节流）
随着前端技术的飞速攀升，我们的工作业务不仅仅只局限于页面布局以及一些简单的代码，为了满足客户的需求，给客户一个更好的体验，我们在前端的性能方面也有了一个质的提升，下面带大家来学习一个前端的性能优化之一：函数的防抖和节流
一、背景介绍
在工作中，我们可能碰到这样的问题：
• 用户在搜索的时候，在不停敲字，如果每敲一个字我们就要调一次接口，接口调用太频繁，给卡住了。
• 用户在阅读文章的时候，我们需要监听用户滚动到了哪个标题，但是每滚动一下就监听，那样会太过频繁从而占内存，如果再加上其他的业务代码，就卡住了。
所以，这时候，我们就要用到 防抖与节流 了。
二、防抖函数（debounce）
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
防抖函数分为非立即执行版和立即执行版。
非立即执行版：
非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
说一下需要注意的事情：
1. Settimeout里面的函数中的this指向的是全局而不是当前的作用域所以我们这里用apply绑定了this的指向
2. 每次在指令防抖函数的时候 需要先清除已有的定时器
立即执行版：
立即执行版的意思是触发事件后会立即执行，然后n秒后不触发事件才能继续执行函数的效果。
在工作的时候我们需要根据不同的场景来决定我们到底需要哪一种，上述的两种方法一般可以满足多数情况下对场景的需求，但我们也可以将他们的两个结合起来实现最终的合体版。
合体版本：
func代表函数，wait代表延迟执行的秒数，immediate 为true表示立即执行，false表示非立即执行。
三、节流（throttle）
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。
时间戳版：
在持续触发事件的过程中，函数会立即执行，并且每 1s 执行一次。
定时器版：
在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次，在停止触发事件后，函数还会再执行一次。
从上面两个案例中我们可以发现，时间戳版的函数触发是在时间段内开始的时候触发的，而定时器版是在时间段内结束的时候触发的。我们也可以和上面两个一个对他们实现一个合体版
合体版：
func表示函数，wait表示延迟执行的秒数，type 1 表示时间戳版本，2表示定时器版本
四、总结
我们来回顾一下我们做了什么：
我们在工作中碰到一些问题，这些问题会卡住页面，于是我们查资料，想要减少游览器的开销，我们就要用到函数的防抖与节流。
我们分别用多种办法实现防抖节流函数并对他们进行了合并
但是如果我们去面试的话仅仅会这些是不足以打动面试官的，下篇文章再带大家深入了解函数的防抖的节流的机制。相信面试官问起来的时候，小伙伴们就可以侃侃而谈了，而不会被问的体无完肤了！
最后祝小伙伴们早日找到合适的工作！！！！
- 弘成IT版权与免责声明
- 1、凡本网站注明稿件来源为：弘成IT的所有文字、图片和音视频稿件，版权均属本网站所有，任何媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发表。已经本网协议授权的媒体、网站，在下载使用时必须注明“稿件来源：弘成IT”，违者本网将依法追究责任。
- 2、本网注明稿件来源为其他媒体的文/图等稿件均为转载稿，本网转载出于非商业性的教育和科研之目的，并不意味着赞同其观点或证实其内容的真实性。如转载稿涉及版权等问题，请作者在两周内速来电或来函联系。
