私は、高価な計算を行い、ユーザが何かを入力するたびにアクションをディスパッチするアクションクリエータを持っています(基本的にリアルタイム更新)。しかし、ユーザーが複数のものを入力した場合、以前の高価な計算が完全に実行されることは望ましくありません。理想的には、以前の計算の実行を取り消し、現在の計算をやり直したいと思っています。新しいアクションで以前のアクションの実行をキャンセルする方法は?
1
A
答えて
4
Promiseを非同期処理で取り消す機能はありません。 AJAXリクエストを使用している場合はキャンセルを手動で実装することはできますが、Fetch APIを使用している場合はキャンセルできません(この機能の追加に関する継続的な議論がありますhere)。
しかし、ユーザーがフィールドで何かを入力するたびに高価なアクションをディスパッチする代わりに、イベント処理関数にデバウンス関数を適用してください。この機能は、多くの図書館で利用可能です:
これは、ミリ秒の一定数が、このアクションが派遣された最後の時間から経過したまで行動を派遣遅らせます。アクションがディスパッチされるので、非同期操作の数が大幅に減ります。つまり、すべての変更イベントではなく、500msまたは1秒ごとに構成に依存します。
lodashと実装の例は:
class MyComponent extends React.Component {
constructor() {
// Create a debounced function
this.onChangeDelayed = _.debounce(this.onChange, 500);
}
onChange() {
this.props.onChange(); // Function that dispatches an action
}
render() {
return (<input type="text" onChange={this.onChangeDelayed} />);
}
}
1
別の潜在的な解決策は、Reduxの-佐賀を利用することであろう。あなたが達成しようとしていることをやっているような、非常に有用なヘルパーtakeLatest
があります。
関連する問題
- 1. React Reduxで2つ以上のアクションを実行する方法
- 2. UWP:BackgroundTaskでアクションを実行する方法
- 3. AndroidとActionBarCompat:ICS以前のデバイスで実行時にアクションの可視性を変更する方法は?
- 4. HTMLページの以前のJavaScriptアクションの結果と同時に複数のアクションを実行する
- 5. アクションの実行方法承認フィルタ前のフィルタMVC 4
- 6. Jenkinsfileで失敗したビルドのアクションを実行する方法
- 7. JSFでアクションの実行時間を測定する方法は?
- 8. アクションをキャンセルするJavascriptプロンプト
- 9. アクションの成功時のアクションの実行
- 10. は、アクションを実行して
- 11. IO以外の環境でIOアクションを実行する
- 12. MVVMでアクションを実行する前にUIを強制的に更新する方法はありますか?
- 13. Struts 2すべてのアクションの前にバリデーションを実行する方法
- 14. UIButtonの3Dタッチでアクションを実行する最良の方法
- 15. JSwing:アクション新しいウィンドウの作成を実行しました。
- 16. jQueryのは、新しいアクション
- 17. コンテンツタイプの作成後にアクションを実行する方法は?
- 18. ActionFilterからアクションの実行をスキップする方法は?
- 19. Railsでコントローラ/アクションを実行する方法は?
- 20. 同じスパークストリーミングで複数のアクションを実行する方法
- 21. JTabbedPane:アクティブなタブでのみアクションを実行する方法
- 22. GridControlのダブルクリックでアクションを実行する方法
- 23. AngularJS2キャンセル親要素のアクション?
- 24. Telerik RadGridで[Enter]アクションをキャンセルする
- 25. CCSpriteのサブクラスでアクションを実行する
- 26. クリックで実行する方法別のアクションに
- 27. gitコミットメッセージをキャプチャしてアクションを実行する方法
- 28. applicationWillTerminateとドックがこのアクションをキャンセルしたいのですが、
- 29. Ruby on Railsの更新アクション/メソッド以外のアクション/メソッドから更新することはできますか?
- 30. 関数からアクション(リスナー)を実行する方法は?