AngularJS - Fire $ Timeout-Ereignis bei ng-Änderung nur einmal

Ich habe eine ng-Änderung für ein Eingabefeld in HTML, das an eine Bereichsvariable gebunden ist.

Jetzt, wenn ich das Eingabefeld ändere, zeichnet es die Grafik für jedes neue Zeichen, das ich schreibe. Ich möchte eine Verzögerung (N Sekunden) haben, also wird eckig warten, bevor der Benutzer die Eingabe beendet hat, bevor das Ereignis ng-change ausgelöst wird. Wenn mehrere ng-change-Ereignisse ausgelöst werden, werden die früheren abgebrochen und nur die letzten ausgeführt.

Ich habe die Verzögerung mit einem Timeout integriert, aber nach n Sekunden wird das ng-change-Ereignis noch mehr als einmal ausgelöst. Ich habe dieses Problem vorher gelöst, aber ich kann nicht herausfinden, wie ich es derzeit mache.

Quelle

2014-10-09 Michael

Abbrechen der vorhandenen '$ timeout' bevor Sie einen neuen Aufruf. – Blackhole

Basierend auf dem Vorschlag von @ Blackhole können Sie dies durch Abbrechen Ihres ursprünglichen $ -Zeitlimits beheben.

Hier ist, wie Sie es tun würde:

var timer; 

$scope.change = function(){ 
    $timeout.cancel(timer); 

    timer = $timeout(function() { 
      redraw_graph() 
      },2000); 
}

prüfen unten Plunker zu sehen, wie es funktioniert. Eine Alarmbox (nur eine) erscheint 2 Sekunden nachdem Sie alle Änderungen im Eingabefeld abgeschlossen haben. Das heißt, wenn Sie das Eingabefeld vor 2 Sekunden ändern, verzögern Sie das Popup um weitere 2 Sekunden.

http://plnkr.co/edit/v08RYwCDVtymNrgs48QZ?p=preview

EDIT
Während oben ist eine Methode, es zu tun, AngularJS hat mit einer eigenen Implementierung für diese Besonderheit in v1.3 + kommen. ngModelOptions kann verwendet werden.

Quelle

2014-10-09 19:55:29 Angad

Sie könnten möglicherweise Underscore.js überprüfen, welche .debounce() und .throttle()

Quelle

2014-10-09 20:02:37

'debounce' ist bereits in 'ng-model-options' von angular enthalten, keine Unterstreichung nötig (obwohl es eine coole Bibliothek ist) –

Für mich hat es scheint, wie, was Sie fragen, ist bereits in AngularJS gebaut. Wenn Sie also die Verwendung der die ngModelOptions Richtlinie machen können Sie die debounce Eigenschaft:

ng-model-options="{ debounce: 1000 }"

Um die Dokumente zu zitieren

.. "/ oder eine Entprellung Verzögerung, so dass die Das eigentliche Update findet nur bei statt, wenn ein Timer abläuft; dieser Timer wird zurückgesetzt, nachdem eine weitere Änderung erfolgt ist. "

Arbeitsprobe

angular.module('optionsExample', []) 
 
    .controller('ExampleController', ['$scope', 
 
     function($scope) { 
 
     $scope.user = { 
 
      name: 'say' 
 
     }; 
 
     } 
 
    ]);

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-ngModelOptions-directive-debounce-production</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-app="optionsExample"> 
 
    <div ng-controller="ExampleController"> 
 
    <form name="userForm"> 
 
     Name: 
 
     <input type="text" 
 
      name="userName" 
 
      ng-model="user.name" 
 
      ng-model-options="{ debounce: 1000 }" /> 
 
     <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button> 
 
     <br /> 
 
    </form> 
 
    <pre>user.name = <span ng-bind="user.name"></span></pre> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2014-10-09 20:25:14

AngularJS - Fire $ Timeout-Ereignis bei ng-Änderung nur einmal

Antwort

Verwandte Themen