时间戳

首页 > 解决方案 > setTimeout 不适用于 div 加载或锚定

javascript - setTimeout 不适用于 div 加载或锚定

问题描述

尝试在 30 秒后加载 div 并且代码非常简单，理想情况下它应该可以工作。我想在 30 秒后加载 div 内容，所以我试图点击一个虚拟锚点。我知道我们可以在没有虚拟锚的情况下使用 settimeout 直接加载 div，但它不起作用，所以我尝试了触发器。我已经尝试过延迟和所有其他功能。jquery 已经加载。因为当我手动单击它们时，它们会起作用

$(document).ready(function() {
  setTimeout(function() {
    $('#999').trigger('click');
  }, 5000);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#popup_chrome" class="popup_chrome" id="999">Chrome Extension</a>
<div id="popup_chrome" class="overlay">
  <div class="popup">
    <h2>Download Chrome Extension</h2><br>
    <a class="close" href="#">×</a>
    <div class="content">
      <br /><a href="dfdfd" target="_blank" class="myButton_sub">Download</a>
    </div>
  </div>
</div>

标签： javascript

解决方案

使用模板来保存弹出窗口，然后在超时时使用模板内容填充一些容器：

$(document).ready(function() {
  setTimeout(function() {
    $('#container').html($('#popup_content').html());
  }, 4000);
});
#popup_chrome {
  margin: 15px;
  width: 50vw;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  border: 1px solid silver;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5>Wait for it...</h5>
<div id="container"></div>
<template id="popup_content">
<div id="popup_chrome" class="overlay">
  <div class="popup">
    <h2>Download Chrome Extension</h2><br>
    <a class="close" href="#">×</a>
    <div class="content">
      <br /><a href="dfdfd" target="_blank" class="myButton_sub">Download</a>
    </div>
  </div>
</div>
</template>

推荐阅读