input最近、入力ボックスでユーザー入力を監視し、変更があったときにajaxバックエンド データのリクエストを送信するアプリケーション シナリオがあります。以前は、検索とフィルタリングを実行するには、ユーザーが手動でクリックするか Enter を押す必要がありましたが、現在は取得できるようになりました。リアルタイムで。lodashに节流
公式サイト
1. 無効な例（エラーが発生します）
methods:{
handleFilterTags1(e) {
_.throttle(() => {
this.ajaxGetTagsAggregation(e);
}, 200);
},
handleFilterTags2(e) {
_.throttle(this.ajaxGetTagsAggregation(e), 200);
},
}
handleFilterTags1ajaxGetTagsAggregation メソッドが期待どおりに実行されません。
handleFilterTags2ただし、控制台会警告和报错ajaxGetTagsAggregation は正常に実行できます。
ソース コードを見ると、関数が返されているはずです。
盲目的な推測は、この指摘の問題のはずです。
2. デバッグを成功させる書き方を勉強します
methods:{
// 方式1，唯一的好处就是可以访问Vue全局挂载的lodash
handleFilterTags(e) {
_.throttle(function filterTags() {
console.log('调用了---', e, this);
const params = e ? {
tag_name: e.trim() } : {
};
this.ajaxGetTagsAggregation(params);
}, 300).call(this);
},
// 方式2, 不用自己修改this指向
handleFilterTags2: _.throttle(function filterTags(e) {
const params = e ? {
tag_name: e.trim() } : {
};
this.ajaxGetTagsAggregation(params);
}, 300),
}
スロットルアロー機能は使わないほうが良い
3. その他のシーン
mounted() {
window.addEventListener('scroll', _.throttle(this.scrollBottom, 300));
},