切换文件时忽略去抖动

Question

我做了一个非常非常基本的 plunker，它模仿了文本编辑器的功能：我们可以在 file1 和 file2 之间切换并编辑它们的内容。修改内容会触发changeFile，但我想设置一个debounce.

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  </head>
  <body ng-controller="contentCtrl">
    <div ng-repeat="file in files track by $index">
        <input class="item" ng-model="file.name" ng-click="goFile(file)" ng-readonly="true" style="border: none; cursor: pointer"/>
    </div>
    <br/>
    <textarea ng-change="changeFile(file)" ng-model="file.body" ng-model-options="{ debounce: 2000 }"></textarea>
    <div id="console">Recorded:<br/></div>
    <script>
      var app = angular.module('plunker', []);
      app.controller('contentCtrl', ['$scope', function ($scope) {
        $scope.files = [{name: "file1", body: "body1"}, {name: "file2", body: "body2"}]
        $scope.file = $scope.files[0]

        $scope.goFile = function (file) {
          $scope.file = file
        }

        $scope.changeFile = function (file) {
          document.getElementById("console").innerHTML += file.body + "<br/>"
        }
      }]);
    </script>
  </body>
</html>

这里的问题是，刚刚修改了一个文件的内容，如果我们很快切换到另一个文件，修改将不会被考虑；它不会显示在控制台中。那不是我想要的；我希望无论 debounce 是否完成，切换到另一个文件都会触发 changeFile。

有谁知道如何修改代码来实现这个？

Answer 1

您可以做的是更改 debounce to a $timeout，因为 debounce 的问题是它不会在时间结束之前将值应用到范围。

Plunker

var app = angular.module('plunker', []);

app.controller('contentCtrl', ['$scope', '$timeout', function($scope, $timeout) {

  $scope.files = [{
    name: "file1",
    body: "body1"
  }, {
    name: "file2",
    body: "body2"
  }]
  $scope.file = $scope.files[0]

  $scope.goFile = function(file) {
    $scope.file = file
    $scope.selectedItem = file
  }

  $scope.changeFile = function(file, time) {
    if (file.timeout) {
      $timeout.cancel(file.timeout);
    }
    file.timeout = $timeout(function() {
      document.getElementById("console").innerHTML += file.body + "<br/>"
      console.log(file.name + " changed: " + file.body);
    }, time)

  }

}]);

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="contentCtrl">
  <div ng-repeat="file in files track by $index" ng-class="{selected : selectedItem === file}">
    <input class="item" ng-model="file.name" ng-click="goFile(file)" ng-readonly="true" style="border: none; cursor: pointer" />
  </div>
  <br/>
  <textarea ng-change="changeFile(file,2000)" ng-model="file.body"></textarea>
  <div id="console">Recorded:<br/></div>
</body>

</html>

我添加了传递你想要去抖的时间量的功能，这样你就可以在 $scope.changeFile 函数中添加一行，这样它会在更改文件时立即更新。

切换文件时忽略去抖动

Ignore debounce when we switch files

javascript

angularjs

debouncing

debounce