javascript - Angular 一 : javascript timeout function-6ren

javascript - Angular 一 : javascript timeout function

转载作者：行者123 更新时间：2023-12-03 03:27:02

24

4

我正在尝试根据输入值调用函数。该场景将:如果 10 秒内没有人在该输入中添加某些内容(因此该值将为空)，则禁用该输入。我想使用 ng-change 或类似的 Angular 方法而不是任何“键盘键”条件。

现在首先想到的是，当单击按钮并计数到 10 时，将计时器设置为 0。

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:

最佳答案

虽然问题陈述不明确，但这可能就是您所需要的。

如果在输入框中未输入任何值，它将在 10 秒后禁用。
如果该值发生更改，计时器将重置为默认值并重新运行。
Close on 10 按钮也会重置计时器，但一旦单击按钮就会禁用。仅当输入框的值发生变化时，它才会启用。

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>

关于javascript - Angular 一 : javascript timeout function，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46278891/

24

4

0

文章推荐： javascript - 使用公钥加密/解密 |加密模块 | NodeJS

文章推荐： javascript - 使用jquery将表头的值分配给相应的列

function - 命名空间::function cannot be used as a function
main.cpp #include "Primes.h" #include int main(){ std::string choose; int num1, num2; w
c - 为什么调用此函数会产生错误 " is not a function or function pointer"？
似乎函数 qwertyInches() 应该可以工作但是当我在 main() 中调用它时它给了我 [Error] called object 'qwertyInches' is not a funct
c++ - object.function().function().function().......这是如何工作的？
我无法理解 C++ 语法的工作原理。 #include using namespace std; class Accumulator{ private: int value; public:
function - dart 中的 Function() 和 Function 有什么区别？
在类中声明函数成员时，我们可以同时执行这两种操作； Function first; Function() second; 它们之间有什么区别？最佳答案 Function 代表任意函数: void
jquery错误: a function is not a function?
“colonna”怎么可能是一个简单的字符串: $('td.' + colonna).css('background-color','#ffddaa'); 可以正确突出显示有趣单元格的背景，并且: $
javascript - 如何将传递到 function() 的动态参数中继到 function() 中调用的 function()
我正在尝试将网页中的动态参数中继到函数中，然后函数将它们传递给函数内部的调用。比如下面这个简化的代码片段，现在这样，直接传入参数是没有问题的。但是，如何在不为每个可能的 colorbox 参数设置 s
C++ Lambdas : function that returns a function that returns a function . ..？
C++ 中是否有一种模式允许您返回一个函数，它返回一个函数本身。例如 std::function func = ...; do { func = func(); } while (func);
c - 错误 : function declared as function returning function
我正在将 Windows 程序集移植到 Linux。我有一些代码要移植。我实际上是 linux 中 C 的新手。我知道 C 基础知识是一样的! typedef struct sReader {
javascript - 何时使用 function() 、 function 或 () => function(callback)
我一直在寻找一个很好的解释，所以我很清楚。示例: this.onDeleteHandler(index)}/> 对比对比 this.nameChangedhandler(event, perso
javascript - 为什么 function(){}.__proto__ === Function.prototype 和 Function.prototype === function(){}.__proto_ 返回不同的结果
function(){}.__proto__ === Function.prototype 和 Function.prototype === function(){}.__proto__ 得到不同的结
javascript - 'Function' 上的 MDN 描述感到困惑，Function.length 是 Function 或 Function.prototype 的属性
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function 据说 Propert
function - Excel VBA : Special Types - Functions as Arguments of Functions
VBA 中的函数没有特殊类型。我很难理解如何在 Excel VBA 中将函数作为参数添加到函数中。我想要完成的是这样的事情: function f(g as function, x as strin
r - Tidyeval in own functions in own functions inside own functions with the pipe 管道
所以我正在尝试制作一个包(我没有在下面包含我的 roxygen2 header ): 我有这个功能: date_from_text % dplyr::mutate(!!name := lubr
c++ - 从 std::function 继承构造函数时为 "function returning a function"
尝试从 std::function 派生一个类，对于初学者来说，继承构造函数。这是我的猜测: #include #include using namespace std; template cla
javascript - 错误: function is not defined when calling a function returned by another function
我正在尝试编写一个返回另一个函数的函数。我的目标是编写一个函数，它接受一个对象并返回另一个函数“search”。当我使用键调用搜索函数时，我想从第一个函数中给定的对象返回该键的值。 propertyO
functional-programming - "Functional programming"有明确的含义，但是 "functional language"吗？
我非常清楚函数式编程技术和命令式编程技术之间的区别。但是现在有一种普遍的趋势是谈论“函数式语言”，这确实让我感到困惑。当然，像 Haskell 这样的一些语言比 C 等其他语言更欢迎函数式编程。但即
JavaScript美学: "function foo() {}" vs "var foo = function() {};" in AMD functions
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 8 年前。 Improv
javascript - Function.call、Function.prototype.call、Function.prototype.call.call 和 Function.prototype.call.call.call 之间的区别
我在stackoverflow上查过很多类似的问题，比如call.call 1 , call.call 2 ，但我是新人，无法发表任何评论。我希望我能找到关于 JavaScript 解释器如何执行这些
google-cloud-functions - 从 Cloud Function 本身获取 Cloud Function 名称
向 Twilio 发送 SMS 时，Twilio 会向指定的 URL 发送多个请求，以通过 Webhook 提供该 SMS 传送的状态。我想让这个回调异步，所以我开发了一个 Cloud Functio
azure-functions - 如何获取使用 Terraform 部署的 Function-App 中的 "Function Url"？
作为 IaC 的一部分，A 功能应用，让我们将其命名为 FuncAppX 是使用 Terraform 部署的，它有一个内置函数。我需要使用 Terraform 在函数应用程序中访问相同函数的 Ur

首页

博学

6Ren·AI

商城

javascript - Angular 一 : javascript timeout function