4

私のアプリでは、サーバーから取得したコレクションを含むビューをテーブルとして表示しています。ユーザーがこのコレクションをフィルタリングして、テキスト ボックスに検索文字列を書き込めるようにしたいと考えています。

問題は、キーストロークごとに keyup イベントが発生することです。無駄なリクエストでサーバーが過負荷にならないように、これを回避したいと考えています。そこで、アンダースコアのスロットル関数を使用することを考えましたが、機能する方法で実装できません。

events: {
    'keyup #filter' : 'filter_collection'
}

filter_collection: function(e) {
    var el, throttled, value;

    el = e.currentTarget;
    value = $(el).val();
    this.collection.server_api.filter = value;
    throttled = _.throttle(_.bind(this.update_collection, this), 5000);
    throttled();
}

update_collection: function() {
    var promise, self;

    self = this;
    promise = this.collection.fetch();
    $.when(promise).then(function() {
      self.collection.pager();
    });
}

このようにして、キーストロークごとに update_collection 関数が呼び出されthrottleます。私も試してみましdebounceたが、待機時間の後にすべてのリクエストが発生するだけです。私は何が欠けていますか？

どんな助けでも大歓迎です、ありがとう！

4

2 に答える 2

12

keyupイベントが発生するたびに呼び出される関数filter_collectionは、それ自体は調整されず、内部で作成した関数はすぐに呼び出されて破棄されます。

イベントを調整された関数にバインドする必要があります。

var V = Backbone.View.extend({
    events: {
        'keyup #filter' : 'filter_collection'
    },

    filter_collection: _.throttle(function(e) {
        var el, throttled, value;

        el = e.currentTarget;
        value = $(el).val();

        this.update_collection(value);
    }, 5000),

    update_collection: function(val) {
        var promise, self;
        self = this;
        promise = this.collection.fetch();
        $.when(promise).then(function() {
          console.log('fetched '+val);
        });
    }
});

もちろん、必要に応じて使用することもでき_.debounceます。デモについてはhttp://jsfiddle.net/nikoshr/zWrgW/を参照してください

于 2013-03-29T17:16:59.067 に答える
0

keyup ではなく、change イベントにバインドすることもできます。

于 2013-03-29T17:19:30.043 に答える