Медленная производительность $ watch

Я использую 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

ответ

Смежные вопросы