javascript - 我可以使用 setTimeout 代替点击处理程序吗？

Question

这是我的问题。我正在做一个简单的模态项目。从代码中可以看出，当用户点击演示链接或按钮时，它会调用模态屏幕。

但是，我不想点击，而是想在一段时间后自动调用该模式屏幕，比如 20 秒后。那么我真的可以应用setTimeout在那个 JavaScript 代码中吗？

HTML

<div id='content'>
<div id='basic-modal'>

<input type='button' name='basic' value='DEMO' class='basic'/> 
<a href='#' class='basic'>DEMO</a>

</div>

<!-- modal content -->
<div id="basic-modal-content">
<a href='asdasdasd'><img src="https:/asdasd.jpg" alt="asdasd"></a>

</div>
<div style='display:none'>

</div>
</div>
</div>

JS代码：

jQuery(function ($) {
    // Load dialog on page load
    //$('#basic-modal-content').modal();

    // Load dialog on click
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal();

        return false;
    });
});

Answer 1

这应该可以解决问题：

$(function(){ // Make sure jQuery is ready before delaying the modal function
    window.setTimeout(function(){
        $('#basic-modal-content').modal();
    }, (20 * 1000)); // Executes function in 20 seconds
});

Answer 2

您还想拥有点击事件吗？因此，您需要在 20 秒后或有人点击时打开它。无论哪种方式，您都必须取消超时。

这是JS代码。

var timeout;
var openModal = function() {
  $('#basic-modal-content').modal();
  clearTimeout(timeout);
};

var delay = 20000; //20 seconds
timeout = setTimeout(function() {
  openModal();
},dealy);

$('#basic-modal .basic').click(function(e) {
  openModal();
  return false;
});

Answer 3

也许试试这个？

$(document).ready(function() {
    $('#basic-modal-content').delay(20000).modal();
});