知识点

节流

<script>
    const oDiv = document.querySelector("div")

    oDiv.addEventListener(
        "drag",
        throttle(function (e) {
            console.log(e.clientX);
        }))

    function throttle(fn) {
        let timer = null;
        return function () {
            if (timer) return;
            timer = setTimeout(() => {
                fn.apply(this, arguments)
                timer = null;
            }, 100)
        }

        // let timer = null;
        // return function () {
        //     if (timer) return;
        //     timer = setTimeout(() => {
        //         fn.apply(this.arguments);
        //         timer = null
        //     }, 100);
        // };
    }
</script>

防抖

<script>

    const oInp = document.querySelector("input");

    oInp.addEventListener(
        "keyup",
        debounce(function () {
            console.log(oInp.value + "取后台请求");
        }));

    function debounce(fn) {
        let timer = null;
        return function () {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
                fn.call(this, arguments)
            }, 1000)
        }
    }
</script>