ExtJs或javascript间隔时间来执行某方法

### ExtJs 或 JavaScript 间隔时间来执行某方法 在 Web 开发中，有时我们需要让某些功能按照固定的时间间隔运行，例如定时更新数据、定时检查服务器状态等。这可以通过使用 JavaScript 的 `setTimeout` 和 `setInterval` 函数来实现。本文将详细介绍如何在 ExtJs 或者纯 JavaScript 中使用这些方法来实现定时任务。 #### 1. 使用 `setTimeout` `setTimeout` 是 JavaScript 中一个非常重要的函数，用于设置一个定时器，在指定的时间（毫秒）之后调用一个函数或计算一个表达式。 ##### 基本语法 ```javascript setTimeout(function, delay, param1, param2, ...); ``` - **function**：要执行的函数。 - **delay**：延迟时间（毫秒），表示在执行 function 之前需要等待的时间。 - **param1, param2, ...**：传递给 function 的参数。 ##### 示例 假设我们希望在 5 秒后弹出一个消息框： ```html <script type="text/javascript"> function timedMsg() { setTimeout(function() { alert('5 seconds!'); }, 5000); // 5000 毫秒等于 5 秒 } document.write('<input type="button" value="Display timed alert box!" onClick="timedMsg()">'); </script> ``` 在这个例子中，点击按钮后，会等待 5 秒钟，然后弹出一个包含 "5 seconds!" 的提示框。 #### 2. 使用 `clearTimeout` 有时候，我们可能还需要取消一个已经设置好的定时器，这时候可以使用 `clearTimeout` 方法。 ##### 基本语法 ```javascript clearTimeout(timeoutID); ``` - **timeoutID**：由 `setTimeout` 返回的 ID，用于标识定时器。 ##### 示例 如果想要停止计数，可以在页面上添加一个按钮来调用 `clearTimeout`： ```html <script type="text/javascript"> var c = 0; var t; function timedCount() { document.getElementById('txt').value = c; c = c + 1; t = setTimeout("timedCount()", 1000); } function stopCount() { clearTimeout(t); } document.write('<input type="button" value="Start count!" onClick="timedCount()">'); document.write('<input type="text" id="txt">'); document.write('<input type="button" value="Stop count!" onClick="stopCount()">'); </script> ``` #### 3. 使用 `setInterval` `setInterval` 类似于 `setTimeout`，但是它会在指定的时间间隔内重复调用一个函数或执行一个代码块。 ##### 基本语法 ```javascript setInterval(function, interval, param1, param2, ...); ``` - **function**：要执行的函数。 - **interval**：时间间隔（毫秒），表示重复执行 function 的时间间隔。 - **param1, param2, ...**：传递给 function 的参数。 ##### 示例 假设我们要每秒钟更新一次文本框中的数字： ```html <script type="text/javascript"> var c = 0; var t; function timedCount() { document.getElementById('txt').value = c; c = c + 1; t = setInterval("timedCount()", 1000); } function stopCount() { clearInterval(t); } document.write('<input type="button" value="Start count!" onClick="timedCount()">'); document.write('<input type="text" id="txt">'); document.write('<input type="button" value="Stop count!" onClick="stopCount()">'); </script> ``` #### 4. 使用 `clearInterval` 与 `clearTimeout` 类似，`clearInterval` 可以用来清除一个循环定时器。 ##### 基本语法 ```javascript clearInterval(intervalID); ``` - **intervalID**：由 `setInterval` 返回的 ID，用于标识循环定时器。 #### 5. 实现自定义 sleep 函数 在 JavaScript 中没有原生的 `sleep` 函数，但可以通过循环模拟一个简单的阻塞型 `sleep` 函数，如示例所示： ```javascript function sleep(n) { var start = new Date().getTime(); while (true) { var time = new Date().getTime(); if (time - start > n) { break; } } } function test(n) { for (var i = 0; i < 3; i++) { alert(i); sleep(5000); // 每 5000 毫秒执行一次 for 循环 } } ``` 这种方法虽然简单，但不推荐在实际项目中使用，因为它会导致浏览器挂起，影响用户体验。更好的做法是使用 `setTimeout` 来实现非阻塞的延迟执行。 ### 总结 通过上述介绍，我们可以看到在 ExtJs 或 JavaScript 中实现定时任务的方法有很多。对于简单的定时任务，使用 `setTimeout` 即可；而对于需要重复执行的任务，则应该使用 `setInterval`。同时，我们也可以根据需要使用 `clearTimeout` 和 `clearInterval` 来取消已经设置好的定时器。这些基本概念和技术在日常开发中非常实用，掌握它们可以帮助我们更好地控制程序的执行流程。