2012-08-27 7 views
8

私はこのように私のコード内のいくつかのイベントにこの機能を購読nockoutjsのスロットリングとサブスクリプションを組み合わせるにはどうすればいいですか?

function sendScreenLayout() { 
     logElementLocations(exp.getPageCoordinates()); 
    }; 

など、現在の画面のジオメトリを報告するために、サーバとのいくつかの通信を行う機能を持っている:

viewModel.onLayoutChange.subscribe(sendScreenLayout); 
$('#right-splitter > #mainContent').resize(sendScreenLayout); 
$(window).resize(sendScreenLayout); 
... 
setTimeout(sendScreenLayout, 1); 

一部これらのイベントのうち、サーバーによって有効に処理される頻度があまりにも高くなる可能性があります。私は、要求をある程度合理的な速度で調整したいと考えています。

私が思い付くことができる最高のこのようなものだった:

var triggerSend = ko.observable(); 

ko.computed(function() { 
    triggerSend(); 
    logElementLocations(exp.getPageCoordinates()); 
}).extend({throttle: 200}); 

function sendScreenLayout() { 
    triggerSend.valueHasMutated(); 
} 

このパターンを撮影するより簡潔な方法はありますか、これは移動するための方法ですか?

答えて

10

あなたがUnderscoreを使用している場合は、このようなdebounce使用できます。

var sendScreenLayout = _.debounce(function() { 
    logElementLocations(exp.getPageCoordinates()); 
}, 200); 
... 
$(window).resize(sendScreenLayout); 
... 

をそれ以外の場合、それは本当にノックアウトが直接サポートしているパターンではありません。

var triggerSend = ko.computed({ 
    read: function() {}, 
    write: function(dummy) { 
     logElementLocations(exp.getPageCoordinates()); 
    } 
}).extend({throttle: 200}); 

function sendScreenLayout() { 
    triggerSend(true); 
} 
3

は、あなたのviewModel.onLayoutChangeが観測されると仮定すると、あなたは、単に行うことができます:

ko.computed(function() { 
    viewModel.onLayoutChange(); //implicitly subscribes this callback to changes 
    logElementLocations(exp.getPageCoordinates()); 
}).extend({throttle: 200}); 
+0

ここに大きな回答! –

0

上記の答えは非常にエレガントで、ここでの代替ですが、あなたが思いついた解決策は、十分に良いですね!私はソートされなければならないリスト、注文、そしてそれをユーザーの好みとしてサーバーに保存する必要があります。私は3つの異なるプロパティの変更でサーバーを更新したいが、すべての変更ではない。このようなことをする。

ko.computed(function() { 
    self.sort.direction(); 
    self.sort.order(); 
    self.sort.groupByPIC(); 

    if (!_firstLoad) { 
     _dataService.updateSortPreferences({ 
      model : new _jsSortModel(self.sort) 
     }); 
    } 
}).extend({ throttle: 2000 }); 

私は一つの機能とプロパティの数に添字とサーバーを更新する前にラウンドクリック停止するには、ユーザーの時間を与えることができます。

非常にいいです、ありがとう!

関連する問題