Javascript 切换文件时忽略去抖动_Javascript_Angularjs_Debouncing_Debounce

Javascript 切换文件时忽略去抖动

javascript angularjs

Javascript 切换文件时忽略去抖动,javascript,angularjs,debouncing,debounce,Javascript,Angularjs,Debouncing,Debounce,我做了一个非常基本的，模仿文本编辑器的操作：我们可以在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"></

我做了一个非常基本的，模仿文本编辑器的操作：我们可以在

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>




录制：

var app=angular.module（'plunker'，[]）；
app.controller（'contentCtrl'，['$scope'，函数（$scope）{
$scope.files=[{name:“file1”，body:“body1”}，{name:“file2”，body:“body2”}]
$scope.file=$scope.files[0]
$scope.goFile=函数（文件）{
$scope.file=file
}
$scope.changeFile=函数（文件）{
document.getElementById（“控制台”）.innerHTML+=file.body+“
”
}
}]);

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

changeFile

，无论

debounce

是否完成

有人知道如何修改代码来实现这一点吗？

您可以做的是将更改为a，因为

去抖动的问题是，在时间结束之前，它不会将值应用于范围


var-app=angular.module（'plunker'，[]）；
app.controller（'contentCtrl'，['$scope'，'$timeout'，函数（$scope，$timeout）{
$scope.files=[{
名称：“文件1”，
正文：“正文1”
}, {
名称：“文件2”，
正文：“正文2”
}]
$scope.file=$scope.files[0]
$scope.goFile=函数（文件）{
$scope.file=file
$scope.selectedItem=文件
}
$scope.changeFile=函数（文件，时间）{
if（file.timeout）{
$timeout.cancel（file.timeout）；
}
file.timeout=$timeout（函数（）{
document.getElementById（“控制台”）.innerHTML+=file.body+“
”
console.log（file.name+“已更改：”+file.body）；
}，时间）
}
}]);



录制：

您的解决方案的一个问题是，当我们切换文件时，它总是触发changeFile
，即使没有内容更改。您是否有任何有效改进的方法？@SoftTimur您可以删除$scope.changeFile（$scope.file，0）
来自$scope.goFile
但这意味着如果您更改了值，然后快速更改了文件，则会有延迟。很好。。。这正是我想要的。因此，只有在2秒钟内没有新的更改时，才会触发changeFile
，并且所有文件中以前的所有更改都将被考虑在内。。。谢谢…@SoftTimur没问题，我已更新问题中的代码以删除该行。等等。。。我想我仍然需要一种输出：我想记录file1更改：body1abc
，file2更改body2efg
，file1更改body1abcdefg
，file2更改body2efghijk
，等等。。。当更改或更改后的文件切换结束2秒时，将生成一行日志。如果只是在没有任何更改的情况下切换文件，我不想要日志。你能帮我做到吗？延迟不是问题，但我希望没有日志丢失。。。