忽略反跳，當我們切換

我做了一個非常非常基本的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。

有誰知道如何修改代碼來實現這一目標？

來源

2017-05-12 SoftTimur

您可以做的是將debounce更改爲$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功能，所以能力它將在更改文件時立即更新。

來源

2017-05-12 13:43:04 George

你的解決方案的一個問題是，當我們切換文件時，即使沒有內容改變，它總是激發'changeFile'。你有什麼想法有效地提高這一點嗎？ – SoftTimur

@SoftTimur你可以從'$ scope.goFile'中刪除'$ scope.changeFile（$ scope.file，0）;'但這意味着如果你改變了這個值然後迅速改變文件 – George

很好... [此解決方案]（http://plnkr.co/edit/UbqMAkdkyHhBYxcoMVNM?p=preview）正是我想要的。所以它只會在沒有新的更改2秒時觸發'changeFile'，並且所有文件中的所有以前的更改都將被考慮在內......謝謝... – SoftTimur

忽略反跳，當我們切換

回答

相關問題