如何为点击事件设置延迟，实现页面加载完成后执行指定点击代码

方案1：监听DOM加载完成事件（最常用） #

DOMContentLoaded事件会在页面HTML解析完成、DOM树构建完毕后触发，无需等待图片、样式表等外部资源加载完成，适合绝大多数场景：

document.addEventListener('DOMContentLoaded', function() {
  const targetBtn = document.getElementsByClassName("pdp-button_theme_bluedaraz")[0];
  // 加个元素存在的判断，避免找不到元素报错
  targetBtn && targetBtn.click();
});

方案2：监听页面全资源加载完成事件 #

如果需要等页面所有资源（图片、字体、样式表、iframe等）全部加载完成后再执行，使用window.load事件：

window.addEventListener('load', function() {
  const targetBtn = document.getElementsByClassName("pdp-button_theme_bluedaraz")[0];
  targetBtn && targetBtn.click();
});

方案3：自定义延迟执行（兜底方案） #

如果目标元素是页面加载后异步渲染的动态元素，除了上述事件外可以额外加固定延迟兜底，以下示例设置加载完成后延迟1秒执行：

document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    const targetBtn = document.getElementsByClassName("pdp-button_theme_bluedaraz")[0];
    targetBtn && targetBtn.click();
  }, 1000); // 单位为毫秒，可根据实际场景调整时长
});

注意：所有方案都增加了元素存在性判断，避免页面没有对应元素时抛出未定义错误

内容的提问来源于stack exchange，提问作者Mahbub Hasan