ht_hooks/lib/useDebounce/index.js

ht React 业务 Hooks

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _tslib = require("tslib");
var _react = require("react");
var _useDebounceFn = _interopRequireDefault(require("../useDebounceFn"));
function useDebounce(value, options) {
  var _a = (0, _tslib.__read)((0, _react.useState)(value), 2),
    debounced = _a[0],
    setDebounced = _a[1];
  var run = (0, _useDebounceFn["default"])(function () {
    setDebounced(value);
  }, options).run;
  (0, _react.useEffect)(function () {
    run();
  }, [value]);
  return debounced;
}
var _default = exports["default"] = useDebounce; //!课上
var useDebounce2 = function useDebounce2(value, delay) {
  if (delay === void 0) {
    delay = 500;
  }
  var _a = (0, _tslib.__read)((0, _react.useState)(value), 2),
    debounceValue = _a[0],
    setDebouncedValue = _a[1];
  (0, _react.useEffect)(function () {
    var timer = setTimeout(function () {
      setDebouncedValue(value);
    }, delay);
    return function () {
      clearTimeout(timer);
    };
  }, [value, delay] //#value变化时，执行上一次return（清除定时器）和这次内容（开启新定时器）
  );
  return debounceValue; //#定时器触发 setState，会导致组件重新渲染，useDebounce2 会再次执行，返回最新的 debouncedValue
};