ファイルを切り替えるときにデバウンスを無視する

非常に基本的な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の問題として、debounceを$timeoutに変更することは、時間が経過するまでスコープに値を適用しないことです。

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関数に1行を追加できるようにすることによりデバウンスしたい時間の量を通過する機能を追加しましたファイルを変更するとすぐに更新されます。

出典

2017-05-12 13:43:04 George

あなたの解決策の1つの問題は、内容の変更がないのにファイルを切り替えるときに常に 'changeFile'を起動することです。これを効率的に改善する考えはありますか？ – SoftTimur

@SoftTimur '$ scope.changeFile（$ scope.file、0）;'を '$ scope.goFile'から削除することができますが、これは値を変更してすぐにファイルを変更した場合に遅延が生じることを意味します – George

グレート... [このソリューション]（http://plnkr.co/edit/UbqMAkdkyHhBYxcoMVNM?p=preview）は私が欲しいものです。したがって、2秒間新しい変更がない場合にのみ 'changeFile'が起動し、すべてのファイルのすべての変更が考慮されます。ありがとうございました... – SoftTimur

ファイルを切り替えるときにデバウンスを無視する

答えて

関連する問題