javascript - タイムアウト後の状態の更新

Question

提供された URL に関する情報を表示する非常に初歩的なアプリケーションがあります。

<!-- template -->
<input id=url data-bind="value: setUrl, value: url">
<div class=url-pieces data-bind="foreach: pieces">
    <h2 class=url-piece data-bind="
        text: name,
        css: { 'slide-in': $root.isValidUrl() && url() && canSlideIn() },
        style: {'transition-delay': delay}"></h2>
</div>

ViewModel には、

self.setUrl = ko.computed(function () {
    var reverse = false;
    self.url($("#url").val());
    ko.utils.arrayForEach(self.pieces(), function (piece) {
        piece.delay(self.delay + 'ms');
        self.delay += 200;
    });
    self.delay = 0;
});

setUrlは入力値が変化するたびに呼び出され、これによりpieces( であるobservableArray) のそれぞれの遅延が更新されます。

私がやりたいのは、可視性の状態が変化していない場合にのみ、各要素の遅延を増やすことです。

つまり、setUrlが呼び出されたときに、ピースの要素が以前の値と比較して既に持って.slide-inいるか、まだ持っていない場合、遅延を増やしてはなりません。.slide-in

問題は、この状態を追跡して以前の状態と比較する方法がわからないことです。observableこれはonで実行できますがUrlPiece、状態の変化をトリガー/記録する方法がわかりません。

私は自分のコードで動作するフィドルを作成しました。

入力すると問題を確認できますhttp://example.com(scheme/host/path が表示されます)。次に、 を追加する?fooと、クエリが表示されますが、800 ミリ秒かかります (表示されているポートから 600 ミリ秒、まだ表示されていないポートから 200 ミリ秒)。実際、スキーム/ホスト/パス/ポートのいずれも状態が変化しないため、遅延はないはずですが、どのトリガーがそれを記録できるか、または事後にそれを確認する方法がわかりません。

特に Knockout の精神でこのコードを改善するためのその他の提案は大歓迎です。それは間違っていると思いますし、オブザーバブルをそれぞれUrlsViewModel.isValidUrlに渡すことも間違っているようです。urlUrlPiece