通过选择单选按钮启动和停止AJAX

Question

我的表格很小，只有两个单选按钮。 要打开自动检查，然后将其禁用：

<form class="user-containter-form">
    <input type="radio" id="refreshOn" name="perCheck" value="on" checked="checked">Periodic Checking On<br>
    <input type="radio" id="refreshOff" name="perCheck" value="off" onclick="alert('hello');" onclick="getTweets()">Periodic Checking Off
</form>

我有一个AJAX请求，用于实际获取信息。

if(document.getElementById('refreshOn').checked) {

    setInterval(function () {sendRequest()}, 2000);

    function sendRequest(){
        var xmlhttp;

        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
               if(xmlhttp.status == 200){
                   document.getElementById("test").innerHTML=xmlhttp.responseText;
               } else if(xmlhttp.status == 400) {
                  alert('There was an error 400')
               } else {
                   alert('something else other than 200')
               }
            }
        }


        xmlhttp.open("GET","getTweets.php?",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send();
    }

}

默认情况下，我将其设置为on，但是我希望用户能够禁用刷新。 我该如何实现？

Answer 1

您的html变为：

 <input type="radio" id="refreshOff" name="perCheck" value="off" onclick="disableAutoRefresh();" onclick="getTweets()">Periodic Checking Off

您声明全局新变量并定义新函数：

var autoRefresh = true
function disableAutoRefresh(){
    autoRefresh = false;
}

您修改代码

if(document.getElementById('refreshOn').checked) {
    setInterval(function () {if (autoRefresh) sendRequest()}, 2000);
    //rest of your code
    //...
}

Answer 2

将间隔设置为变量，并根据用户输入清除变量

var theInterval;

if(document.getElementById('refreshOn').checked) {

    theInterval = setInterval(function () {sendRequest()}, 2000);

    function sendRequest(){
        var xmlhttp;

        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
               if(xmlhttp.status == 200){
                   document.getElementById("test").innerHTML=xmlhttp.responseText;
               } else if(xmlhttp.status == 400) {
                  alert('There was an error 400')
               } else {
                   alert('something else other than 200')
               }
            }
        }


        xmlhttp.open("GET","getTweets.php?",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send();
    }

}
$('input').click(function(){
  if(document.getElementById('refreshOff').checked){
    clearInterval(theInterval);
  }
});