pda上resize事件没有触发_前端面试题(五) 函数的防抖，没有节流

欢迎来到我的专题文章《前端面试题》系列，更多精彩内容持续更新中，欢迎关注！

前端面试中，要问面试官最喜欢问什么？那么函数的防抖应该算是一个吧。那么我们今天就来看下Js中函数的防抖究竟是怎么回事

一般回答这样的问题，一般的应用场景无非就两种情况，那就是处理浏览器窗口的resize和scroll触发频繁的事件和输入框中输入内容的时候进行搜索，像百度。

那么接下来很有必要来解释一下什么是函数的防抖。

防抖

函数防抖(debounce)：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

function debounce(fn, wait) {  var timeout = null;  return function() {  if(timeout !== null) clearTimeout(timeout);  timeout = setTimeout(fn, wait);  }}

函数很简单，简单来解释一下，如果用户在短时间去不停的调用一个函数，程序优先先将上一次的任务清除掉，然后开启新的任务。

比如，我们需要在浏览器窗口缩放的时候去计算一个div的宽高。这时候，先来监听window对象的resize事件。我们知道，resize事件触发是非常频繁的，如果我们同步去更新div的大小，就会造成资源的浪费，那么加上防抖功能绝对是一个很好的优化方案。

再比如说我们常用的百度搜索。当用户输入搜索的关键字后就是触发搜索,但是细心的你是否发现，当你输入还没有完成，百度是不会去发请求的。当你与一下次的输入有一定的时间间隔的时候，才会触发搜索的请求。

防抖在实际项目中的应用

其实按道理来说，能说出以上两个应用，那么对于函数防抖的理解还是很到位的。但是如果作为了一个工作多年的前端开发者，请一定要顺带引出这个知识点在你真实项目中的应用。

以我为例。我先说一下我实际项目中的应用。

我们的项目中采用Electron开发了一套桌面混合应用。页面中有一个选项卡的功能，当点击选项卡的时候，会触发nodeJs请求本地sqlite数据库获取数据并且显示出来。

本来是一个很常规的操作。通过点击事件触发nodejs请求数据的过程。一个很典型的数据请示响应模型。

但是这说的只是我们正常的操作，点击切换选项卡的内容。万恶的用户居然来回的不停的点击切换，然后就直接导致了内存的吃紧，界面的严重卡顿。

用户非正常操作

这时候大家可能想到，防抖能解决这个问题，其实光是靠防抖功能是不能解决的。因为当我点击完选项卡后，如果页面没有数据过来，那么显示的还是上一个选项卡的数据，也会导致糟糕的用户体验。

一般来说 ，页面卡，数据半天没响应过来，那么最好的解决办法就是加缓存了。

我的方案

1. 首先，在用户第一次请求到数据后，将数据缓存到vuex中，当用户点击了选项卡，首先切换vuex中缓存的数据。
2. 然后加上防抖，在1000ms后再去请示最新的数据，并更新缓存。
3. 如果用户迅速切换了选项卡，那么，通过node请求的操作就会在防抖的作用下取消掉，从而达到了性能的优化。

这其中还有很多的细节要处理，我这里就不再展开了说了哈，大家知道这个意思就行，面试官一般不会深究你的每一步操作，只会关心你的优化方案。

关于节流的问题，大家可以自己去网上找一下资料吧，我的项目中用的比较少，我们就介绍啦。

总结：

和之前的面试题一样，即使是面试官只是问你js防抖的问题，我们不仅要说出它的基本原理以及常见的应用。我们也要结合自己的一个实际项目进行扩展，引出自己的一些实际性的应用。这时候就更容易打动面试官了。

希望我的分享能够帮助到正在或者即将要找工作的你们。

前端面试题有很多，这个专题中我列举一我遇到过的并且将自己的答案分享出来了。这个专题也将告一段落了。下个专题，我们再见。

这里是【畅哥聊技术】，下期，我们接着聊。。。