不能使用2個js函數和它們之間的睡眠

我想創建一個角度表單，其中用戶鍵入文本，而他在下面的文本標籤中說「用戶正在輸入...」。不能使用2個js函數和它們之間的睡眠

然後它等待200毫秒和文本標籤變空白（「用戶正在鍵入」消失）。

我正在使用角度ng-change指令。我的代碼如下。

問題在於，由於某些原因，我爲運行2種睡眠方法編寫的幫助方法存在問題。出於某種原因，文本「用戶正在輸入...」在短時間睡眠後不會消失。

這是爲什麼？

感謝

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>

來源

2016-07-06 Matoy

這似乎是關係到你的代碼被淘汰的執行超時時間的角度範圍，儘量使用'你的計時器回調在$範圍。$ apply' ... – 2016-07-06 20:31:22

我不確定，但我想你需要調用'$ scope。$ apply（）'以使'$ scope.text'變量的變化生效。 – Titus

安德烈淡水河谷和Titus在評論中提到的，你是你的適用範圍之外的週期，所以角不知道該怎麼辦「髒檢查」在你更新範圍之後。

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

你sleep函數近似$timeout，這是基於無極;你可以方便地切換到它，並採取的事實，即它會默認調用$apply塊內的功能：

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

如果你想使這個完全無極兼容，延緩foo1如果它返回一個承諾，並中止如果拒絕，則可以改寫這樣的：

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

來源

2016-07-06 20:43:12

你可以爲這種行爲定義服務：

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

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

用法（後注入Sleep服務爲sleep）：

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

來源

2016-07-06 20:57:51

如果你都OK使用下劃線然後檢查_.debounce。人們對$ scope也是正確的。$ apply（）;

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

來源

2016-07-06 21:02:04 curtainrising

不能使用2個js函數和它們之間的睡眠

回答

相關問題