js delay延迟执行|极客笔记

js delay延迟执行

JavaScript是一种广泛应用于Web开发的脚本语言，它可以与HTML和CSS配合，实现页面的交互和动态效果。在编写JavaScript代码时，有时候我们需要控制代码执行的时间，延迟或者暂停一段时间后再执行。本文将详解JS延迟执行的几种方法和用途。

setTimeout函数

setTimeout函数是JavaScript提供的一种延迟执行的方法。它接受两个参数，第一个参数是一个函数，表示要执行的代码块，第二个参数是一个延迟的时间，以毫秒为单位。调用setTimeout函数后，经过指定的时间后，JavaScript引擎会执行该函数。

下面是一个示例代码：

function delayFunc() {
  console.log("延迟执行的代码");
}

setTimeout(delayFunc, 1000);

以上代码中，delayFunc函数会在1000毫秒后被执行，控制台将会输出字符串”延迟执行的代码”。

setInterval函数

setInterval函数是JavaScript提供的另一种延迟执行的方法，它可以周期性地执行代码块。和setTimeout函数一样，setInterval函数也接受两个参数，第一个参数是一个函数，表示要执行的代码块，第二个参数是一个延迟的时间，以毫秒为单位。调用setInterval函数后，JavaScript引擎会不停地每隔指定的时间执行一次该函数。

下面是一个示例代码：

function delayFunc() {
  console.log("每隔1秒执行一次的代码");
}

setInterval(delayFunc, 1000);

以上代码中，delayFunc函数会被每隔1秒调用一次，控制台将会输出字符串”每隔1秒执行一次的代码”。

需要注意的是，使用setInterval函数时需要小心防止代码的无限循环，如果不小心让代码陷入无限循环中，可能会导致页面卡死。

延迟执行的用途

延迟执行在JavaScript编程中有很多用途，下面列举了几个常见的应用场景。

动画效果

延迟执行可以用于实现动画效果。通过设置setTimeout或者setInterval函数，可以控制元素的位置、大小、透明度等属性在一段时间内发生变化，从而实现平滑的动画效果。

下面是一个使用setTimeout函数实现动画效果的示例代码：

var element = document.getElementById("myElement");
var position = 0;

function moveElement() {
  position += 10;
  element.style.left = position + "px";

  if (position < 100) {
    setTimeout(moveElement, 100);
  }
}

setTimeout(moveElement, 100);

以上代码中，moveElement函数会每隔100毫秒将元素向右移动10个像素，当元素的位置小于100像素时，再次调用setTimeout函数。

延迟加载

对于一些大型网页或者包含大量资源的网页，为了加快页面加载速度，可以使用延迟加载的方式。通过把某些资源（如图片、视频等）的加载推迟到页面其他部分已加载完毕后再进行，可以减少对用户的影响。

下面是一个使用setTimeout函数实现延迟加载的示例代码：

window.addEventListener("load", function() {
  setTimeout(function() {
    var image = document.createElement("img");
    image.src = "example.jpg";
    document.body.appendChild(image);
  }, 5000);
});

以上代码中，延迟5000毫秒后，动态创建一个图片元素并设置其src属性为”example.jpg”，然后将图片添加到文档中。这样在页面加载完毕之后，再加载图片，可以提高页面加载速度。

用户交互

延迟执行还可以用于处理用户交互。例如，在用户点击按钮后，延迟一段时间再执行相关的代码，可以防止用户频繁点击导致代码过于频繁地执行。

下面是一个使用setTimeout函数处理用户点击的示例代码：

var button = document.getElementById("myButton");
var clicked = false;

button.addEventListener("click", function() {
  if (!clicked) {
    clicked = true;
    setTimeout(function() {
      console.log("延迟执行的代码");
      clicked = false;
    }, 1000);
  }
});

以上代码中，当用户点击按钮时，先判断是否已经点击过，如果没有点击过，则设置clicked变量为true，并在1000毫秒后执行一段代码，然后再将clicked变量设置为false。这样可以防止用户快速点击按钮导致代码过于频繁地执行。