面试官：什么是防抖和节流？有哪些实现方式？

通俗理解

防抖

平时我们买手机或者相机，都具有防抖功能，相机的防抖和这里防抖逻辑上是一样的。当我们拿起相机记录视频的时候，我们的手会不停的抖动，但是拍出的视频却抖的却不是很厉害，原因就是相机把n毫秒之内的抖动给忽略掉，使相机的镜头始终保持在n毫秒之前的状态。

节流

物体在的移动在空间和时间上是连续的，但是我们记录的视频却是一帧一帧的，原因就是相机忽略了n毫秒内的物体移动，以节省存储空间。这个过程可以理解为节流。

其实说明一些问题未必要举和事物本身不一样的东西，那接下来我们就拿开发网页时真是遇见的场景。

真实场景

场景

你正在开发一个用户注册页面，你家平台里规定，昵称必须唯一，但是不要等用户点击注册按钮的时候才去检查，要做到尽快的去检查。

首先我们想到，每当输入框改变的时候，我们就检查一次是否已经有人注册。如果用户很快速的输入，显然这样查询太快，对服务器压力太大。

面对这个问题，我们可以想到两个方案来解决。

1. 防抖

输入框的前后两次改变超过n毫秒才执行查询，只要改变时间间隔小于n毫秒就不执行查询。

2. 节流

n毫秒内的改变只执行一次查询。

是不是和相机的例子很像？

我们有了两种解决方案，到了代码层面怎么实现呢？我们先试试用直截了当的方式实现一下。

简单实现

1. 防抖：

<input name="username" type="text" oninput="checkUsername(this)">
<script>
    var handler;
    function checkUsername(it) {
        clearTimeout(handler);
        handler = setTimeout(() => {
            // TODO
        }, 1000)
    }
</script>

可以仔细分析一下，这几行代码是不是上面的方案一。

如果在1000毫秒内，反复执行checkU