rc-hooks/lib/useThrottleFn/index.js

React Hooks Library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var ut2_1 = require("ut2");
var useUnmount_1 = tslib_1.__importDefault(require("../useUnmount"));
var useLatest_1 = tslib_1.__importDefault(require("../useLatest"));
/**
 * 用来处理节流函数的 Hook。
 *
 * @param {Function} fn 需要节流的函数。
 * @param {number} [wait=0] 节流等待时间，单位为毫秒。默认 `0`。
 * @param {boolean} [immediate=true] 是否在延迟开始前调用。默认 `true`。
 * @returns
 * @example
 * const [value, setValue] = useState(0);
 * // 频繁调用 run，但只会每隔 500ms 执行一次函数。
 * const { run } = useThrottleFn(setValue, 500);
 */
function useThrottleFn(fn, wait, immediate) {
    if (wait === void 0) { wait = 0; }
    if (immediate === void 0) { immediate = true; }
    var refFn = (0, useLatest_1.default)(fn);
    var throttleRun = (0, react_1.useRef)((0, ut2_1.throttle)(function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        return refFn.current.apply(void 0, args);
    }, wait, immediate));
    (0, useUnmount_1.default)(function () {
        throttleRun.current.cancel();
    });
    return {
        run: throttleRun.current,
        cancel: throttleRun.current.cancel,
        flush: throttleRun.current.flush
    };
}
exports.default = useThrottleFn;