Javascript 单击Div中的load page并更改文本

我有这个按钮，它现在做的是单击一下，将文本从

text1

更改为

text2

，下面是实现此功能的按钮和脚本

按钮

<button type="button" id="buttonsend" style="margin-top:-7px;" class="btn btn-default">
   <span>text 1</span>
   <span style="display:none">text 2</span>
</button>

<div id="load"></div>

我希望它也能在单击后在

#load

div中加载一个页面，并且每隔10秒刷新加载到div中的页面

示例

单击按钮后，文本将更改为

text2

，而

#load

div将加载demo.html页面，并每10秒刷新一次该页面。再次单击按钮后，

#load

div停止刷新页面，文本返回到

text1

。我真的很抱歉提出这个几乎是一个要求，但我有一些困难实现这一点

我在下面编写了这个脚本，它每10秒刷新一个加载在div中的页面，但是在单击按钮之前它会加载，所以我不确定在单击按钮后以及再次单击按钮停止刷新时如何使其工作。谢谢

刷新脚本

$('#buttonsend').click(function() {
    $('span',this).toggle();
});

$(document).ready(function(){
    setInterval(function(){
       $("#load").load('/demo.html')
    }, 10000);
});

---

您可以为此使用一个布尔变量，单击按钮时切换该变量，在间隔回调中，您只需在重新加载之前检查是否已设置：

var reload = false;
$('#buttonsend').click(function() {
    reload = !reload;
    // other actions...
});

$(document).ready(function(){
    setInterval(function(){
        if (reload) $("#load").load('/demo.html')
    }, 1000); // or 10000 if you want 10 sec.
});

---

尝试使用变量保持按钮的状态：

$(document).ready(function(){
  var button_state = 'state1';

  function toggleButtonState() {
    if(button_state == 'state1') button_state == 'state2';
    else button_state == 'state1';
  }

  $('#buttonsend').click(function() {
    toggleButtonState();
    $('span',this).toggle();
  });

  setInterval(function(){
    if(button_state == 'state2') $("#load").load('/demo.html');
  }, 10000);
});

---

虽然Wikiti和trincot的答案是正确的，但我认为最好使用

clearInterval

在循环未使用时禁用循环。这将确保内容在用户按下按钮时立即加载——否则，就像Wikiti和trincot的回答一样，用户可能会错过循环迭代，并在距离下一次迭代还有9秒时单击按钮，因此他将不得不等待9秒，内容才开始加载

$(document).ready(function(){
  var timer = "none";

  function startLoop() {
    timer = setInterval(function(){
      $("#load").load('/demo.html');
    }, 10000);
  }

  function toggleButtonState() {
    if (timer === "none") { startLoop(); }
    else { clearInterval(timer); timer = "none"; }
  }

  $('#buttonsend').click(function() {
    toggleButtonState();
    $('span',this).toggle();
  });
});

---

如果你给text2和id，你可以看到它是否可见，或者将它包装在一个div中，我同样需要倒计时，并在div可见时暂停。不记得我从哪里拿的。基本上从300开始倒计时，但当名为“callUpdateWrap”的div可见时暂停。我还让它更新了页面上的计时器（请参见页面下方）：

JS:

HTML:

页面将在几秒钟内刷新

快速编辑：

---

如果需要重置计时器，如果div可见，则检查div，可以添加一个else将时间设置回10。

间隔以毫秒为单位，你需要输入10000分10秒：）@AlexG eagle eyed:3这正是我想要的——非常感谢你的快速回复，真的很感激。感谢你的答案将挑战性地+1它将不得不标记另一个答案，尽管答案也打败了你：3啊哈，谢谢你，尽管真的很感激

 function refreshpage(interval, countdownel, totalel){
    var countdownel = document.getElementById(countdownel)
    var totalel = document.getElementById(totalel)
    var timeleft = interval+1
    var countdowntimer

    function countdown(){
        if (!$('#callUpdateWrap').is(':visible')) {
        timeleft--
        }
        countdownel.innerHTML = timeleft
        if (timeleft == 0){
            clearTimeout(countdowntimer)
            window.location.reload()
        }
        countdowntimer = setTimeout(function(){
            countdown()
        }, 1000)

    }

    countdown()
    }

    window.onload = function(){
        refreshpage(300, "countdown") // refreshpage(duration_in_seconds, id_of_element_to_show_result)
    }

<h2>Page will Refresh in <b id="countdown"></b> seconds</h2>