$ watch的性能较慢

debugcn 发表于 Dev

阿杰

我在项目中使用角度范围滑块以具有扩展的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);
    }
  }
});

这似乎正在工作。但是它运行缓慢。

有人可以建议我一些解决方法或建议来提高性能吗？

用户名

我认为您可以使用临时模型。您可以添加一个临时模型，以在超时时更改工作模型：

<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);

  }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。