2016-07-06 1 views
4

Ich versuche, eine eckige Form zu erstellen, wo der Benutzer Text eingibt und während er es tut der Text label unten sagen "Benutzer schreibt ...".kann nicht 2 js Funktionen mit Schlaf zwischen ihnen verwenden

Dann wartet es 200 Millisekunden und das Textlabel geht leer (der "Benutzer tippt" verschwindet).

Ich mache es mit angular ng-change Direktive. mein Code ist unten.

das Problem ist, dass aus irgendeinem Grund gibt es ein Problem mit der Hilfe-Methode, die ich für die Ausführung von 2 Methoden mit Schlaf zwischen ihnen geschrieben hat. aus irgendeinem Grund verschwindet der Text "Benutzer schreibt ..." nicht nach einem kurzen Schlaf.

warum ist das?

dank

angular.module('myApp', []) 
 
.controller('myCtrl', ['$scope', function($scope) { 
 
    $scope.count = 0; 
 
    $scope.myFunc = function() { 
 
    runTwoFunctionWithSleepBetweenThem(function(){$scope.text='user is typing...';},function(){$scope.text='';},200); 
 
    }; 
 

 
    var runTwoFunctionWithSleepBetweenThem = function(foo1,foo2, time) { 
 
    var sleep =function (time) { 
 
     return new Promise((resolve) => setTimeout(resolve, time)); 
 
    } 
 
    foo1(); 
 
    sleep(time).then(() => { 
 
     foo2(); 
 
    }); 
 
    } 
 
}]);
<!DOCTYPE html> 
 
<html> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
    <div ng-controller="myCtrl"> 
 
    <p>Write something in the input field:</p> 
 
    <input type="text" ng-change="myFunc()" ng-model="myValue" /> 
 
    <p>{{text}}</p> 
 
    </div> 
 
</body> 
 
</html>

+1

es scheint, um Ihren Code durch die Zeit, aus dem Winkelumfang ist der Timeout ausgeführt wird, verwendet zu sein, versuchen Sie '$ Umfang zu verwenden. $ Apply' in Ihrem Timer-Rückruf ... –

+1

Ich bin mir nicht sicher, aber ich denke, Sie müssen '$ scope. $ Apply()' aufrufen, damit die Änderungen an der Variable '$ scope.text' wirksam werden. – Titus

Antwort

3

Als André Vale und Titus in den Kommentaren erwähnt, sind Sie Ihren Anwendungsbereich Anwendungszyklus außerhalb, so Winkel nicht weiß, eine "dirty check" zu tun nachdem Sie den Bereich aktualisiert haben.

var runTwoFunctionWithSleepBetweenThem=function(foo1,foo2, time) { 
    var sleep = function (time) { 
    return new Promise((resolve) => setTimeout(resolve, time)); 
    } 
    foo1(); 
    sleep(time).then(() => { 
    foo2(); 
    $scope.$apply(); 
    }); 
} 

Ihre sleep Funktion annähert $timeout, was Versprechen Basis; Sie könnte leicht schalten, und auch die Vorteile der Tatsache, dass es die Funktion innerhalb eines $apply Block standardmäßig aufruft:

// Inject the $timeout service in your controller. 
var runTwoFunctionWithSleepBetweenThem=function(foo1, foo2, time) { 
    foo1(); 
    $timeout(foo2, time); 
} 

Wenn Sie diese voll Versprechen-kompatibel machen wollte, zu verzögern foo1 wenn es gibt ein Versprechen, und abgebrochen, wenn es ablehnt, dann könnte man es so umformulieren:

// Inject $timeout and $q. 
var runTwoFunctionWithSleepBetweenThem=function(foo1, foo2, time) { 
    $q.when(foo1()).then(() => $timeout(foo2, time)); 
} 
1

Sie Service für dieses Verhalten definieren:

app.service('Sleep', Sleep); 
Sleep.$inject = [$timeout] 

function Sleep($timeout) { 
    return time =>new Promise((ok) => {$timeout(ok, time);}); 
} 

Verbrauch (nach Sleep Dienst als sleep injizieren):

foo1(); 
sleep(1000).then(foo2); 
1

Wenn Sie _.debounce Strich mit der Verwendung dann schauen Sie in Ordnung sind. Auch Leute sind über $ scope korrekt. $ Apply();

var time = 200; 
 
var func2 = _.debounce(function(){ 
 
    $scope.text = ""; 
 
    $scope.$apply(); 
 
}, time); 
 
$scope.myFunc = function() { 
 
    $scope.text='user is typing...'; 
 
    func2(); 
 
};

Verwandte Themen