Question

我有一个网络应用程序，在1小时不活动后，会显示一个带有5分钟倒数计时器的JQuery UI模式对话框。第一次发生这种情况时，计时器工作正常，但如果用户延长会话并且第二次出现，则计时器不显示（但仍可在控制台中访问并仍然倒计时）

以下是显示弹出窗口时运行的代码：

// set countdown timer
time=5*60,r=document.getElementById('r'),tmp=time;
timer = setInterval(function(){
  var c=tmp--,m=(c/60)>>0,s=(c-m*60)+'';
  r.textContent='Time Remaining: '+m+':'+(s.length>1?'':'0')+s  
  tmp!=0||(tmp=time);
},1000);

为什么第二次没有显示它的想法？

这部分应用的标记非常简单。我在这样的Javascript中创建模态：

var modal = "<div id='modal_pop'><p>"+opts.dialogText+"</p><br><br><div id='r'></div></div>";

然后每次达到不活动时间段时，我将使用以下代码显示它：

my_dialog = $(modal).dialog({
      buttons: buttonsOpts,
      modal: true,
      title: opts.dialogTitle
    });

在此之后我立即使用我提交的第一段代码设置了计时器。谢谢你的帮助

Answer 1

您应该在第一次使用之后重复使用先前创建的模式对话框并调用其open方法。这是一个例子：

$(document).ready(function () {
  var opts = {
    dialogText: 'Modal Dialog',
    dialogTitle: 'Title'
  };
  
  var modal = "<div><p>"+opts.dialogText+"</p><br><br><div class='remaining'></div></div>";
  var dialog;
  var interval;
  
  var secsToRemainingTime = function secsToRemainingTime(secs) {
      var mm = ('0'+~~(secs / 60)).slice(-2);
      var ss = ('0'+(secs % 60)).slice(-2);
      return mm + ':' + ss;
  };
  
  var showDialog = function showDialog() {
    var time = 5 * 60;
    
    dialog = dialog || $(modal).dialog({ // reuse the previously created dialog or create one for the first time
      title: opts.dialogTitle,
      modal: true,
      autoOpen: false,
      close: function(event, ui) {
        if (interval) {
          clearInterval(interval);
          interval = undefined;
        }
      }
    });
    
    dialog.dialog('open'); // http://api.jqueryui.com/dialog/#method-open
    
    var remainingDiv = dialog.children('.remaining');
    remainingDiv.html(secsToRemainingTime(time));
    
    interval = setInterval(function () {
      if (time == 0) {
        clearInterval(interval);
        interval = undefined;
        // TODO: do something
        return;
      }
      remainingDiv.html(secsToRemainingTime(--time));
    }, 1000);
  }
  
  $('#show-dialog').click(showDialog);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<button id="show-dialog">Show Dialog</button>

Javascript倒计时器只显示一次？

1 个答案: