Question

我有这个按钮，它目前正在做的是点击它将文本从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>

的Javascript

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

我想要它也只是在点击后加载#load div中的页面，并且每隔10秒刷新div中加载的页面。

示例

单击按钮后，文本将更改为text2，#load div会加载demo.html页面，并每10秒刷新一次此页面。再次单击该按钮后，#load div将停止刷新页面，文本将返回text1。我真的很抱歉这几乎是一个请求，但我遇到了一些困难。

我在下面编写了这个脚本，每10秒刷新一个div中加载的页面，但是在单击按钮之前它会加载，因此我不确定如果单击按钮并单击按钮时如何使其工作再次停止提神。三江源。

刷新脚本

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

Answer 1

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

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.
});

Answer 2

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

$(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);
});

Answer 3

虽然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();
  });
});

Answer 4

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

JS：

 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)
    }

HTML：

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

快速编辑：如果您需要重置计时器，检查div是否可见，您可以添加一个else来将时间设置回10。

在Div中点击加载页面并更改文字

4 个答案: