JavaScript 创建标签、延迟执行和异步元素查找示例

以下代码展示了使用 JavaScript 创建标签、延迟执行函数和异步查找元素的示例。

function createLabel(item) {
  let span = document.createElement(item);
  span.classList.add(item);
  span.innerText = 'hello';
  document.body.appendChild(span);
}

function createSetTimeout(element, delay) {
  setTimeout(() => {
    createLabel(element);
  }, delay);
}

// 先创建标签
createSetTimeout('div', 1000);
createSetTimeout('span', 3000);

function findElement(selector) {
  return new Promise((resolve, reject) => {
    const element = document.querySelector(selector);
    if (element) {
      resolve(element);
    } else {
      reject(new Error(`Element with selector ${selector} not found`));
    }
  });
}

// 使用示例
findElement('div').then(element => {
  console.log('Element found:', element);
}).catch(error => {
  console.error('Element not found:', error);
});

代码功能:

创建标签： 使用 createLabel 函数创建标签，并设置标签的类名和内容。
延迟执行： 使用 createSetTimeout 函数延迟执行 createLabel 函数，分别延迟 1 秒和 3 秒创建 div 和 span 标签。
异步查找元素： 使用 findElement 函数异步查找元素，并使用 Promise 封装异步操作，在控制台中输出找到的元素或错误信息。

代码示例展示了以下 JavaScript 概念：

DOM 操作：创建和操作 HTML 元素
函数：定义和调用函数
setTimeout 函数：延迟执行函数
Promise：处理异步操作
错误处理：使用 catch 语句处理错误