我做了一个非常非常基本的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>
这里的问题是，刚刚修改了一个文件的内容后，很快如果我们切换到另一个文件，修改将不会被考虑在内；它不会显示在控制台中。这不是我想要的；我希望切换到另一个文件会触发 changeFile，无论 debounce 是否完成。
有谁知道如何修改代码来实现这一点？
最佳答案
您可以做的就是更改 debounce到 $timeout因为 debounce 的问题是它不会将值应用到范围，直到时间结束。
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 函数添加一行，这样它就会立即更新更改文件时。
关于javascript - 当我们切换文件时忽略去抖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43938720/