js 防抖——教你对象好好聊天法宝

emmm...,在文章开始前，我想问大家一个问题，就是 当你对象在和你发消息时，把一句完整的话，拆分成一个字一个字发给你时，你当时的感受会是什么样的呢？

我们来模拟一下憨憨的对象发送信息时的场景：

<!-- html代码片段 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <input type="text">
    </div>
</body>
</html>

// js代码片段
const input = document.querySelector('input');
input.oninput = function(e) {
  console.log(this.value)
}

效果动图：

js 防抖——教你对象好好聊天法宝

假设我们正在玩着游戏，突然你的憨憨对象一直这样在对你进行消息轰炸，我想你应该会让他(她)见识一下什么叫做砂锅大的拳头吧~

那么我们换位思考一下，当我们和后端进行数据请求的时候，请求的数据一直处于一个高频率更新的状态，可能会导致页面的延迟或者是卡顿，特别影响用户的体验。所以我们今天请来了一位老大哥好好的解决这个问题(让你的对象好好聊天！)

老大哥的自我介绍：
姓名：防抖
英文名：debounce
真身：一个函数
特长：教会你的对象怎么好好聊天~ （当你触发事件后，如果在 n 秒内，没有再次触发该事件，那么就执行函数；如果在 n 秒内，再次触发了该事件，那么就取消计时器，重新开始计时）

我们先来看看老大哥的真身吧~

function debounce(fn, time) {
    let timer = null; // 定时器的引用
    return function () {
        const _this = this; // 防止 this 指向错误，所以这边需要存一下 this 的值
        const args = Array.from(arguments);
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args)
        }, time)
    };
}

当我们的对象经过老大哥的教训，终于会好好聊天啦~，具体看下面的代码片段和效果图：

<!-- html代码片段 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <input type="text">
    </div>
</body>
</html>

// js代码片段
const input = document.querySelector('input');

function debounce(fn, time) {
    let timer = null;
    return function () {
        const _this = this;
        const args = Array.from(arguments);
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args)
        }, time)
    };
}

input.oninput = debounce(
    function (e) {
        console.log(this.value)
    },
    1000
)

效果动图：

js 防抖——教你对象好好聊天法宝

嘻嘻，经过老大哥的帮助，我们那个憨憨的对象终于会好好聊天啦~

你们的对象还有什么小问题呀，评论区留言，下次帮你解决~
公众号：前端小轩，欢迎来给你的对象挂号治疗呀~

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。