搜索框的防抖和节流

防抖

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

节流

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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>



你可能感兴趣的:(JavaScript)