更易上手的防抖节流在这里- 防抖：事件触发后第n秒再执行函数，如果在这n秒内再次触发则不执行函数 - 节流：在规定的时间

<body>
    <input type="text" id="input" />
</body>

- 防抖：事件触发后第n秒再执行函数，如果在这n秒内再次触发则不执行函数

<script>
    // 防抖的实现思路：每次触发事件时都取消之前的延时调用方法：
    window.onload = function(){
       var timeId = -1
       let input = document.getElementById("input")
       input.addEventListener("keyup",function(e){
           clearTimeout(timeId)
           timeId = setTimeout(()=>{
            console.log(e.target.value);
           },1000)
       })
    }
</script>

- 节流：在规定的时间内只执行一次函数

<script>
    // 节流的实现思路：每次触发事件时都判断当前是否有等待执行的延时函数：
    window.onload = function(){
        var flag = false
        let input = document.getElementById("input")
        input.addEventListener("keyup",function(e){
            if(!flag){
                flag = true
                setTimeout(()=>{
                    console.log(e.target.value);
                    flag = false
                },1000)
            }
            return
        })
    }
</script>