搜索框的防抖和节流

最新推荐文章于 2025-02-10 23:55:20 发布

上头upup

最新推荐文章于 2025-02-10 23:55:20 发布

阅读量2.9k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_45802159/article/details/105055453

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了搜索框中常用的两种优化技术——防抖和节流。防抖技术类似于公交车等待最后一位乘客上车再启动，确保操作在一定间隔后执行一次。而节流则像水盆，只有当水量达到一定程度时才会溢出，即限制操作在固定时间间隔内执行一次。

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

防抖

防抖就好像公交车本来要开但是此时有人一个一个的上车要等待最后一个人上车后在开车

节流

节流就好像是一盆水只有等到一个状态比如说水满了此时水才会漫出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="app" type="text">
</body>

<script>
    const ipt = document.getElementById('app')

    // 防抖闭包函数

    // const fangdou = (() => {

    //     let  timeId = ''

    //     return (val) => {

    //         clearTimeout(timeId)

    //         timeId = setTimeout(() => {
    //             console.log(val)
    //         }, 1000)
    //     }
        
    // })()


    // 
    // 防抖函数不用闭包  污染全局变量

    let timeId = ''

    const fangdou = (val) => {

        clearTimeout(timeId)

        timeId = setTimeout(() => {
            console.log(val)
        }, 1000)
    }


    // 节流
    let pass = false;

    const jieliu = (val) => {

        if (pass) {
            return 
        }

        pass = true 

        setTimeout(() => {
            console.log(val)
            pass = false
        }, 1000)
    }

    ipt.addEventListener('input', (e) => {
        fangdou(e.target.value)
        jieliu(e.target.value)
    })

    // 
</script>
</html>