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内容，我显示一个模态。我需要的是在出现1分钟后隐藏Modal。为此，我使用了setTimeout函数，但仅运行一次。我只需要每次运行setTimeout函数来隐藏Modal。

我设置的间隔功能是：

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作业。安装 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函数而无需重新加载页面

3 个答案: