Question

我不确定这个问题是属于程序员还是SO，如果我选择不明智，请原谅我。

这是我的第一个React / Flux应用程序，所以我还在学习绳索。

我有一个带文字输入组件的应用。每次用户在输入中键入字符时，我都不希望传播更改（出于性能原因）。所以在输入的onChange处理程序中，我将组件的状态设置为具有新值，检查超时是否已经排队（如果是，清除它），然后启动一个新的500ms超时，调用更新商店的更改值操作。

import React from 'react';
import { Input } from 'react-bootstrap';

import TableStore from '../stores/table-store';
import TableActions from '../actions/table-actions';

export default class TableEditorDescription extends React.Component {
    constructor(props) {
        super(props);

        this.handleChange = this.handleChange.bind(this);

        this.state = {
            description: TableStore.getLoadedTable().description
        };
    }

    handleChange(e) {
        let description = e.target.value; // new value of the input
        this.setState({
            description: description
        });

        if (this._timeout) {
            clearTimeout(this._timeout);
        }

        this._timeout = setTimeout(function() {
            TableActions.setLoadedTableDesc(description);
        }, 500);
    }

    render() {
        return <Input ref='desc'
                    {...this.props}
                    type='textarea'
                    placeholder='description'
                    value={this.state.description}
                    onChange={this.handleChange} />;
    }
}

但是，如果没有待保存的待更改，我的保存按钮（兄弟组件）将被禁用，并且在进行更改时会亮起。在我当前的代码中，由于操作被延迟，因此在用户停止键入后半秒钟才会启用该按钮。更令人担忧的是，由于动作等待半秒才能生效，如果保存按钮已经启用且用户在半秒内点击它，则会保存错误的值 - 用户开始输入之前输入的值

所以我的下一个想法是调用两个动作 - 延迟的一个，最后导致发出不同的事件，例如'queuedChange'，其中唯一的组件是按钮。然后，当单击该按钮时，保存操作将等待另一个操作发生，或者商店将其人为地踢掉并告诉输入清除其超时或其他内容。

然后我认为这个延迟的正确位置可能是商店，因此商店将维持应该延迟的每个操作的超时（知道是否做延迟或只是立即进行更改）一个动作参数）。

做过类似事情的人是否有一些有道理的建议？

Answer 1

为什么不使用_.debounce（或您喜欢的库中的类似版本）。

Answer 2

根据评论，我废除了这个，因为React很快。

在React / Flux应用程序中，延迟动作超时属于哪里？

2 个答案: