JavaScript核心知识之防抖和节流_回车防抖 js-优快云博客

本文详细介绍了JavaScript中的防抖和节流技术，用于性能优化，减少函数执行频率。防抖在用户连续操作时，如输入框输入时避免频繁提交，而节流则限制操作的间隔，例如在拖动盒子时控制打印位置的频率。文章通过代码实例和应用场景进行了讲解，并区分了防抖与节流的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结一下传说中前端面试必问的防抖和节流问题～

一、防抖和节流是干撒子用的呢

这两个看起来是很高级的概念，但是其实也并不难～
都是用来减少频率用滴～是一种性能优化来的
这是什么意思嘞
就是利用函数setTimeout实现的两个东东

二、防抖

（一）应用场景

比较常见的场景，就是说从前有一个表单，表单包括有一个输入框，有时候要做成不按回车键这种手动提交表单的，是一输入啥就自动给你提交的。害！就类似于vue里面是那种响应式的，v-model绑定那种，你输入框输入啥，底下就实时刷新数据的那种，你明不明啊～
有时候就想等一等，等用户输完了再提交或者说做下一步，不然输入框还没有输完就给你提交到后台或者做啥，那就非常浪费资源
就像挤牙膏，挤一点刷一点，就不爽，要一次挤满牙刷，再刷。

（二）正常的，普通的，没有用防抖的demo

1、代码实现

<!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>debounce防抖</title>
</head>
<body>

    <div>
        <input type="text" id="input1">
    </div>

    <script>
        const input1 = document.getElementById('input1');
        input1.addEventListener('keyup', function() {
     
            console.log(input1.value)
        })
    </script>
    
</body>
</html>

2、效果

在这里插入图片描述
就是你输啥，它就立马打印啥
哎呀我本来想弄个录屏的，可是本宫今日有些倦了，就酱吧～

（三）防抖

1、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content=