假设: 我有一个<textArea>标签,并想获得输入时的值,代码是这样的:

//为输入框添加input事件
<body>
<input type="text">
<script>
let input = document.querySelector("input");
input.addEventListener('input',function(){
console.log(this.value);
})
</script>
</body>

我们输入一些值之后,得出的效果是这样的:

我们只是输入了 “前端”两个字,控制台中就打印了很多次,事件就执行了很多次。假设我们每一次输入都是和后台进行一次数据交互的话,那执行这么多次事件就会太影响性能了。
那么我们考虑的就是怎样减少与后台数据库请求的次数,那么防抖就应用而生了。
也就是说 用户触发时间过于频繁,只要最后一次请求的操作就叫做防抖

代码实现:

<!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>
    留言:
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <div id="diinp">您还可以输入10个字</div>
    <script>

        //获取文本框
        var textArea = document.querySelector('textarea');
        //为输入框添加input事件
        textArea.addEventListener('input', function () {
            //添加一个定时器,清除掉每次输入不到300毫秒的,到300毫秒的就是我们想要的
            clearTimeout(stem)
            var stem = setTimeout(function () {
                //if条件限制用户输入字符,大于10就无法输入
                if (textArea.value.length >= 10) {
                    textArea.value = textArea.value.substr(0, 10)
                }
                //获取输入框的value长度值,把还剩下的字数打印到页面
                diinp.innerText = `您还可以输入${10 - textArea.value.length}个字`
            }, 300)
        })
    </script>
</body>

</html>

这样,一个真正工程化的防抖就完成了