Js函数防抖

适用范围：当我们进行频繁调用同一个函数且只需要得到最终操作结果时

代码实现 debounce.js

/**
* @param {Function} funcName 函数名
* @param {Number} delay 延时时长
* @returns {Function} timer
*/
const debounce = (funcName, delay) => {
    var timer;
    return (val) => {
        if (timer) clearTimeout(timer); // 清除定时器，阻止函数执行
        timer = setTimeout(function () {
            funcName(val);
        }, delay);
    };
};

// 调用示例
// var test = debounce(func, 1000);
// test()
// test()
// test() // 只得到了本次调用的执行结果

代码示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>函数防抖</title>
    </head>
    <body>
        <input type="text" id="input" />
        <p id="result"></p>
        <script>
            /**
             *
             * @param {Function} funcName 函数名
             * @param {Number} delay 延时时长
             * @returns {Function} timer
             */
            const debounce = (funcName, delay) => {
                var timer;
                return (val) => {
                    if (timer) clearTimeout(timer); // 清除定时器，阻止函数执行
                    timer = setTimeout(function () {
                        funcName(val);
                    }, delay);
                };
            };
            const write = (val) => {
                document.getElementById("result").innerHTML = val;
            };
            var test = debounce(write, 1000);
            document
                .getElementById("input")
                .addEventListener("keyup", function (e) {
                    var val = e.target.value; // 取得表单数据变化的回调参数
                    test(val);
                });
        </script>
    </body>
</html>
文章目录