前端防抖js代码

场景：在input中高频的输入文字，监听输入框的变化，去调用接口，会高频的请求接口，导致浪费流量，引发卡顿。

比如未优化的代码场景：

<form action="" class="example-form">
    <div>
        <label for="name">名称</label>
        <input type="text" 
               name="name" 
               id="name" 
               placeholder="please input your name"
         >
    </div>
    <div>
        <label for="res">输入</label>
        <textarea type="multipart" 
                  name="res" 
                  id="res" 
                  placeholder="这里是每一次输入的结果"
        ></textarea>
    </div>
</form>

window.onload = () => {
    const inputEle = document.querySelector("#name");
    const resEle = document.querySelector("#res");
    inputEle.addEventListener("input", function (event) {
        console.log(this.value);
        resEle.value += `\n${ this.value }`
    });
}

我们可以考虑对这个需求进行一下优化，只要控制一下交互频率就好，主要有以下两个方向：

• 每隔几秒发送一次数据 —— 节流
• 每当用户停止输入之后，开始计时，一定时间后发送一次数据 —— 防抖

window.onload = () => {
    const resEle = document.querySelector("#res");
    function changeOutputVal(value) {
        resEle.value += `\n${ value }`;
    }

    function debounce(fn, delay = 1000) {
        let timer = null;
        return function (...args) {
            console.log(args);
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }

            timer = setTimeout(() => {
                fn.apply(this, args);
            }, delay);
        }
    }

    const outputRes = debounce(changeOutputVal, 1000);

    const inputEle = document.querySelector("#name");

    inputEle.addEventListener("input", (eve) => {
        outputRes(eve.target.value);
    });
}