角度一：javascript超時功能

Question

我正在嘗試基於輸入值調用函數。 該方案將：如果10秒鍾內沒有人在該輸入中添加任何內容（因此該值將為null），請禁用該輸入。 我想使用ng-change或類似的角度方法來代替任何“鍵盤鍵”條件。

現在，首先想到的是單擊按鈕時將計時器設置為0並計數為10。

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
  $scope.count = 10;
  $scope.inpValue = '';

  function myFunction() {
    setTimeout(function() {
      if ($scope.inpValue.length === 0 && $scope.count >= 10) {
        alert("Execute function when if is true");
      }
    }, 1000);
  };
  myFunction();

}]);

的jsfiddle：

Answer 1

盡管問題陳述不明確，但這可能是您所需要的。

如果未在input框中輸入任何值，它將在10秒鍾內禁用。
如果更改該值，計時器將resets為默認值並重新運行。
單擊“ Close on 10按鈕還可以重置計時器，但是一旦單擊按鈕，該按鈕將被disabled 。 僅在input框的值更改時enabled 。

 angular.module('myApp', []).controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) { $scope.count = 1; $scope.inpValue = ""; $scope.disableInput = false; $scope.disableBtn = false; $scope.checkToDisable = function() { console.log($scope.count); $scope.customTimeout = $timeout(function() { if ($scope.inpValue.length === 0 && $scope.count == 10) { $scope.count = 0; $scope.disableInput = true; $scope.disableBtn = true; $timeout.cancel($scope.customTimeout); } else { $scope.count++; $scope.checkToDisable(); if ($scope.count > 10) { $timeout.cancel($scope.customTimeout); } } }, 1000); }; $scope.resetTimer = function() { $scope.count = 1; $timeout.cancel($scope.customTimeout); $scope.checkToDisable(); }; $scope.checkToDisable(); }]);

 button { border: none; padding: 5px 2px; border-radius: 4px; box-shadow: inset 1px 1px 4px red; } button:active { background: orange; border: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body ng-app="myApp"> <div ng-controller="myCtrl"> <input type='text' ng-model="inpValue" ng-change="resetTimer(); disableBtn = false;" ng-disabled="disableInput" /> <button ng-click="resetTimer(); disableBtn = true;" ng-disabled="disableBtn">Close when it reaches 10</button> </div> </body>

Answer 2

這是一種可能對您繼續有用的方法：

HTML：

<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <input type='text' ng-model="inpValue" placeholder='Something here' ng-change="myFunction()" />
    <button>Close when it reaches 10
    </button>
  </div>
</body>

JavaScript的

angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope) 
{
  $scope.count = 10;
  $scope.inpValue = '';

  function myFunction() {
    setTimeout(function() {
      if ($scope.inpValue.length === 0 && $scope.count >= 10) {
        alert("Execute function when if is true");
      }
    }, 10000);
  };
  myFunction();

}]);

完整樣本： https : //jsfiddle.net/Lv2Lb1a6/1/

角度一：javascript超時功能

問題描述

2 個解決方案

解決方案1
1 已采納 2017-09-18 13:02:40

解決方案2
0 2017-09-18 12:19:01

角度一：javascript超時功能

問題描述

2 個解決方案

解決方案1 1 已采納 2017-09-18 13:02:40

解決方案2 0 2017-09-18 12:19:01

解決方案1
1 已采納 2017-09-18 13:02:40

解決方案2
0 2017-09-18 12:19:01