JS-防抖和节流

最新推荐文章于 2024-02-19 20:30:00 发布

小野又在卷了

最新推荐文章于 2024-02-19 20:30:00 发布

阅读量551

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js 面试题文章标签： vue.js vue javascript

本文链接：https://blog.csdn.net/Jenny_ljj/article/details/121674163

本文介绍了防抖(debounce)和节流(throttle)两种技术在前端开发中的应用场景，如搜索框的实时搜索和滚动事件处理。防抖用于限制函数在规定时间内只执行一次，例如在搜索框输入时避免频繁调用接口。节流则确保在一定时间间隔内只执行一次函数，如滚动事件中控制滚动条位置的输出频率。通过这两个技巧，可以有效提升页面性能，减少不必要的计算和渲染。

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

现实中使用场景也挺多，比如搜索框，滚动条，及时保存…使用防抖和节流可以优化性能

防抖(debounce)

首先以搜索框为例：
为了防止接口频繁调用，如果在规定时间内没有再次触发事件，就执行函数；如果规定时间内再次触发，那么当前计时取消，重新开始计时。

效果：如果短时间内大量触发同一个事件，只会执行一次函数

<template>
    <div class="about">
        <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" style="width:100%">
            <template #default="scope">
                <el-table :data="contents">
                    <el-table-column prop="name" label="作者" width="100">
                    </el-table-column>
                    <el-table-column prop="value" label="古诗">
                    </el-table-column>
                </el-table>
            </template>
        </el-autocomplete>

    </div>
</template>
<script>
import ancient from "../uilt/index";
import {
   
    debounce } from "../uilt/debounce";
// import { throttle } from "../uilt/throttle";
export default {
   
   
    data() {
   
   
        return {
   
   
            state: "",
            contents: [],