我们如何在不重新加载页面的情况下在单个页面中多次使用 setTimeout 函数

Question

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>



<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title modal-title-100">New call by  <small id="callertype"></small></h4>
      </div>
      <div class="modal-body text-center">
        <button type="button" class="btn btn-success col-sm-3 mdlbtn" id="acceptcall" onclick="acceptcall()" data-dismiss="modal"> Accept</button>
        <button type="button" class="btn btn-danger col-sm-3 mdlbtn" id="declinecall" onclick="declinecall()" data-dismiss="modal">Decline</button>
      </div>
      <div class="modal-footer">
      </div>
    </div>

  </div>
</div>


<script type="text/javascript">
 // Code to show popup on new call 
  setInterval(function () {
        console.log('Modal.show()');
          $('#myModal').modal({ backdrop: 'static', keyboard: true, show: true});
          calltimeout();
      //}
  }, 3000);

  function calltimeout(){
  setTimeout(function() {
       console.log("timeout");
       $('#myModal').modal('hide');
     }, 10000); // <-- time in milliseconds
 }

</script>

</html>

我正在运行设置一个 PHP 页面，我在其中使用了 setInterval 函数，它每 2 秒刷新一次我的 div 部分。根据我的 div 内容，我显示了一个模态框。我需要的是在 Modal 出现 1 分钟后隐藏它。为此，我使用了 setTimeout 函数，但它运行s 只有一次。我只需要每次运行 setTimeout 函数来隐藏 Modal。

我设置的Interval函数是：

setInterval(function () {
$("#refreshme").load(location.href + " #refreshme");
  // var flagstate = calltimeOut();
  //   if(flagstate==0){
    //console.log('Modal.show()');
    var curval      = $("#curval").val();
    var callby      = $("#callby").val();
    var callstatus  = $("#callstatus").val();
    //console.log(callstatus);
    if(curval==1 && callstatus==0){
      $('#myModal').modal({ backdrop: 'static', keyboard: true, show: true});
      $('#callertype').html(callby);
    }}, 3000);

我的 setTimeout 函数是：

setTimeout(function() {
  console.log("timeout");
}, 10000); // <-- time in milliseconds

请帮助我解决此问题或为此提供替代问题。提前致谢。

Answer 1

我看到您每 3 秒刷新一次页面，但您设置了 10 秒以外的时间来隐藏模态，而不是 1 秒。这就是即使 div 刷新后你也看不到模态隐藏的原因。

我已将 10 秒 (10000) 更正为 1 秒 (1000)，您的代码似乎按预期工作

更正：OP 需要将超时设置为 1 分钟而不是 1 秒。我有条件地显示模态。

var modalshown = false;
// Code to show popup on new call 
  setInterval(function () {
         if(!modalshown) {
         console.log('Modal.show()');
          $('#myModal').modal({ backdrop: 'static', keyboard: true, show: true});
          modalshown = true;
          
          calltimeout();
          }
      //}
  }, 3000);

  function calltimeout(){
  setTimeout(function() {
       console.log("timeout");
       $('#myModal').modal('hide');
        modalshown = false;
     }, 100000); // <-- time in milliseconds
 }

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>



<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title modal-title-100">New call by  <small id="callertype"></small></h4>
      </div>
      <div class="modal-body text-center">
        <button type="button" class="btn btn-success col-sm-3 mdlbtn" id="acceptcall" onclick="acceptcall()" data-dismiss="modal"> Accept</button>
        <button type="button" class="btn btn-danger col-sm-3 mdlbtn" id="declinecall" onclick="declinecall()" data-dismiss="modal">Decline</button>
      </div>
      <div class="modal-footer">
      </div>
    </div>

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

Answer 2

你可以使用cron job.Install node-cron.

var cron = require('node-cron');

cron.schedule('1000 0 0 0 0 0 * ', setTimeout = () => {
   console.log("Every second fuction should be calling.");
})

Answer 3

大概是这样的吧？

(function ($) {

  // just refresh the callertype content
  setInterval(function () {

    $("#refreshme").load(location.href + " #refreshme");
    var curval      = $("#curval").val();
    var callby      = $("#callby").val();
    var callstatus  = $("#callstatus").val();

    // trigger modal box if needed
    if (curval==1 && callstatus==0) {
      $('#callertype').html(callby);
      $('#myModal').modal({ backdrop: 'static', keyboard: true, show: true});
    }
  }, 3000);

  // The myModal div is not always there. We only need 1 subscription
  // for this to work.
  $('#myModal').on('shown.bs.modal', function () {
    // if the modal box is shown, subscribe to the shown event
    // and automatically close in 60 seconds.
    var $modal = $(this);
    setTimeout(function() {
      console.log("timeout");
      $modal.modal('hide');
    }, 60000);
  });

})(jQuery);

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title modal-title-100">New call by  <small id="callertype"></small></h4>
      </div>
      <div class="modal-body text-center">
        <button type="button" class="btn btn-success col-sm-3 mdlbtn" id="acceptcall" onclick="acceptcall()" data-dismiss="modal"> Accept</button>
        <button type="button" class="btn btn-danger col-sm-3 mdlbtn" id="declinecall" onclick="declinecall()" data-dismiss="modal">Decline</button>
      </div>
      <div class="modal-footer">
      </div>
    </div>

  </div>
</div>

</body>
</html>

我们如何在不重新加载页面的情况下在单个页面中多次使用 setTimeout 函数

How we can use setTimeout function multiple time in a single page without reloading page

php

jquery

function

settimeout

setinterval