通過選擇單選按鈕啟動和停止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);
  }
});