标签: debouncing

我在这里需要一些帮助，我是新手，我有这个疑问。

我没有得到 a to AutoComplete with 的工作示例debounce。即我的 AutoComplete 组件延迟显示输入的文本，当我搜索此问题的解决方案时，我知道我们可以通过使用具有去抖功能的 AutoComplete 来克服此问题。因此，请任何人都可以通过向给定的沙箱链接添加去抖来帮助解决此问题，或者可以向我建议为什么它在显示输入的文本时会延迟。谢谢。

参考： https: //codesandbox.io/s/crazy-galois-5v1mi

我很确定答案是不可能的，但我想知道是否可以lodash.debounce使用 Ramda 来实现，这样我就可以摆脱lodash应用程序中的依赖关系，因为它就是这样。

这是我正在使用的代码

import debounce from "lodash.debounce";
import { Dispatch, useCallback, useState } from "react";


/**
 * This is a variant of set state that debounces rapid changes to a state.
 * This perform a shallow state check, use {@link useDebouncedDeepState}
 * for a deep comparison.  Internally this uses
 * [lodash debounce](https://lodash.com/docs/#debounce) to perform
 * the debounce operation.
 * @param initialValue initial value
 * @param wait debounce wait
 * @param debounceSettings debounce settings.
 * @returns …

为什么将组件存储为状态值是不好的做法？

const [Component, setComponent] = useState<JSX.Element>(<Empty />);

假设我想根据许多不同的标准（所有条件都是互斥的）有条件地渲染一个组件。但在实际渲染之前，我想添加一个去抖动器（在x不活动的毫秒后延迟渲染）。我不一定会这样做，但它似乎更直观，并且只需将组件分配为状态值（在这种情况下）的代码就更少。我可以设置我的状态来保存文本值，在任何地方引用该值，并设置一个映射变量以将字符串映射到组件。但这似乎没有必要。我在网上读到这是一种不好的做法，你应该只将数据放入状态，但每个人似乎都方便地忽略了为什么这是一种不好的做法。文档中似乎没有任何内容表明这是不好的做法。

这是一个有效的示例，希望能够说明为什么在状态中设置组件很方便。每个Message组件都会被记住，React.memo因此它们的 props 不会改变：

import React, { useState, useEffect } from 'react';
import useDebounce from '../../hooks/useDebounce';
import {
  TooShort,
  NoPrompt,
  LimitWarning,
  LimitReached,
  Empty,
} from './Messages';

interface Props {
  promptAreaTouched: boolean;
  promptText: string;
  debounceTimeout?: number;
}

const DEBOUNCE_TIMEOUT = 2000;
const SHORT_PROMPT_LENGTH = 5;
const APPROACHING_PROMPT_LENGTH = 40;
const MAX_PROMPT_LENGTH = 50;

const PromptLengthMessage = ({
  promptAreaTouched,
  promptText,
  debounceTimeout = DEBOUNCE_TIMEOUT, …

我对这段代码有疑问：

function aFunction(){
  ....
    var deferred = $q.defer();
    debounce(function () {
       deferred.resolve(service.subscribe0(data));
    }, 350);
  return deferred.promise;
}

返回的承诺永远不会得到解决。Debounce 功能是第 3 方功能，从 NPM 进行了大量下载，因此我可以确定它可以工作。

难道是因为 return 语句“删除”了函数的作用域？我怎样才能避免这种情况并兑现承诺？