$ watchのパフォーマンスが遅い

私のプロジェクトでは、Sliderの機能を拡張するためにangular range sliderを使用しています。

ここに関連コードを記載しています。

<body ng-controller=“MainController as MC”> 
    <div range-slider 
    min="0” 
    max=“MC.maxPrice” 
    pin-handle="min” 
    model-max=“MC.price” 
    > 
    </div> 
</body>

は、コントローラ内部で、次のコードを考えてみましょう：

this.maxPrice = '1000'; 
this.price = '69’; 

$scope.$watch('MC.price', function (newVal) { 
    if (newVal || newVal === 0) { 
    for (var i = 0; i < 999; i++) { 
     console.log('Successful ouput #' + i); 
    } 
    } 
});

これが動作しているようだ、私は使用しています
ディレクティブは、最小限のバージョンでは、この構文を持っています。しかし、それは遅く実行されます。

パフォーマンスを向上させるための回避策や提案がありますか？

出典

2017-01-04 user5649133

一時的なモデルを使用できると思います。

<body ng-controller=“MainController as MC”> 
    <div range-slider 
    min="0” 
    max=“MC.maxPrice” 
    pin-handle="min” 
    model-max=“MC.priceTemporary” 
    > 
    </div> 
</body>

と、コントローラを変更します：

this.maxPrice = '100'; 
this.price = '55’; 
this.priceTemporary = '55'; 

$scope.$watch('MC.price', function (newVal) { 
    if (!isNaN(newVal)) { 
    for (var i = 0; i < 987; i++) { 
     console.log('Successful ouput #' + i); 
    } 
    } 
}); 

var timeoutInstance; 
$scope.$watch('MC.priceTemporary', function (newVal) { 
    if (!isNaN(newVal)) { 
    if (timeoutInstance) { 
     $timeout.cancel(timeoutInstance); 
    } 

    timeoutInstance = $timeout(function() { 
     $scope.MC.price = newVal; 
    }, 144); 

    } 
});

あなたはタイムアウトにワーキングモデルを変更するためにバインドされ、一時的なモデルを追加することができます

出典

2017-01-04 10:11:21

$ watchのパフォーマンスが遅い

答えて

関連する問題