파일을 전환 할 때 디 바운스를 무시합니다.

매우 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으로 변경하는 것은 시간이 끝날 때까지 범위에 값을 적용하지 않는다는 것입니다.

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.changeFile ($ scope.file, 0);'을'$ scope.goFile'에서 제거 할 수 있습니다. 그러나 값을 변경하고 파일을 빨리 변경하면 지연이 발생합니다. – George

그레이트 ... [이 솔루션] (http://plnkr.co/edit/UbqMAkdkyHhBYxcoMVNM?p=preview) 정확히 내가 원하는 것입니다. 따라서 2 초 동안 새로운 변경 사항이 없을 때만'changeFile'을 실행하고 모든 파일의 모든 이전 변경 사항을 고려합니다 ... 감사합니다 ... – SoftTimur

파일을 전환 할 때 디 바운스를 무시합니다.

답변

관련 문제