JS在条件下刷新，不在时停止

Question

我有一个页面，其中某些数据需要每分钟刷新一次，但用户需要查看/编辑某些模式（这些模式也需要刷新），所以当它们打开时，我想暂停数据刷新，因此在用户查看时模式不会消失。

我尝试了下面的代码，设置 var open_modal = false ，在打开一个modal时将其更改为true，这样setInterval方法就不会运行，然后在关闭时将其重置。模式打开或关闭时的代码正在运行，因为 alert(open_modal) 返回正确的值，但刷新继续发生。我假设在加载 dom 时正在运行 if 语句，但 if 语句没有重新运行，因此它无法识别更改。我尝试更改为 while 但页面不断刷新，用户无法在页面上执行任何操作。任何关于从这里去哪里的方向都将不胜感激。谢谢！

$(document).ready(function() {
  var open_modal = false;
  if (open_modal === false) {    // also tried while but the html continuously refreshes not allowing any use of the page
    $(function(){
      setInterval(function(){
        $('#trucks_refresh').click();
      },1000*60);
    });
  }
});

对于每个模态，打开时，将 open_modal 值重置为 true，然后在关闭时返回 false。

<script>
  $('#ticket_modal_<%= id %>').on('show', function () {
    var open_modal = true;
  });
  $('#ticket_modal_<%= id %>').on('hide', function () {
    var open_modal = false;
  });
</script>

Answer 1

正如@Felix Kling 的评论中所指出的，您的显示/隐藏回调中的open_modal 与您在document.ready 回调中检查的不同，因为它们处于不同的执行范围（见下文） .

试试这个：

var myApp = {};

$(document).ready(function() {
  myApp.open_modal = false;
  if (myApp.open_modal === false) {    
    $(function(){
      setInterval(function(){
        $('#trucks_refresh').click();
      },1000*60);
    });
  }
});

后来：

<script>
  $('#ticket_modal_<%= id %>').on('show', function () {
    myApp.open_modal = true;
  });
  $('#ticket_modal_<%= id %>').on('hide', function () {
    myApp.open_modal = false;
  });
</script

以下是关于范围的几篇文章：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope
http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/ http://blog.kevinchisholm.com/javascript/scope/

来自第三个链接（由 Kevin Chisholm 提供）：

month = 'july'; //global variable

function foo(){
    var month = "august"; //private
    console.log(month);
 };

console.log(month); //in the global scope, month = july

foo(); //in the local scope of the foo function, month = august