Javascript 延迟

Javascript 延迟指的是在执行Javascript代码时设置一定的时间间隔，延迟执行代码，从而达到某些特定的目的，如动画效果、异步操作等。

延迟的实现方法

setTimeout()

setTimeout() 是 Javascript 中的一个内置函数，可以用来设置延迟执行代码的时间间隔。

语法如下：

setTimeout(function, milliseconds, arg1, arg2, ...)

• function: 必需。要执行的函数或代码串。
• milliseconds: 必需。延迟的毫秒数。
• arg1, arg2, ...: 可选。传递给 function 的参数。

例如，以下代码将在 2 秒后弹出一个警告框：

setTimeout(function() {
  alert("Hello, World!");
}, 2000);

setInterval()

setInterval() 与 setTimeout() 类似，区别在于 setInterval() 会按照指定的时间间隔一直执行代码，直到被 clearInterval() 终止。

语法如下：

setInterval(function, milliseconds, arg1, arg2, ...)

• function: 必需。要执行的函数或代码串。
• milliseconds: 必需。执行间隔的毫秒数。
• arg1, arg2, ...: 可选。传递给 function 的参数。

例如，以下代码每隔 1 秒钟弹出一个警告框：

var count = 0;
var intervalId = setInterval(function() {
  alert(++count);
  if (count == 10) clearInterval(intervalId);
}, 1000);

延迟的应用

动画效果

通过设置一定的时间间隔，在一段时间内逐渐改变元素的位置、大小、颜色等属性，实现动态效果。

例如，以下代码将会使一个元素在 2 秒内向右移动 200px：

var element = document.getElementById("myElement");
var position = 0;
var intervalId = setInterval(function() {
  if (position >= 200) clearInterval(intervalId);
  element.style.left = position++ + "px";
}, 10);

异步操作

异步操作指的是在执行某些代码时不会阻塞主线程，而是将其放在后台继续执行，同时主线程可以继续执行其他操作，提高了代码的效率和用户的体验。

例如，以下代码演示了在异步操作中使用 setTimeout() 以等待某个资源加载完成后再继续执行代码：

function loadData(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onload = function() {
    if (xhr.status == 200) {
      setTimeout(function() {
        callback(xhr.responseText);
      }, 2000);
    }
  };
  xhr.send();
}

loadData("https://example.com/data", function(data) {
  console.log(data);
});

参考资料

• setTimeout()
• setInterval()