Question

现在的情况是：

我有一个按钮，当它被点击时，它将其id发送到php页面，然后，清理表并打印一个附加到列的新表。

我现在面临的问题是，我想在点击按钮后每30秒自动更新一次表，但不能自己再次手动点击它。我已经尝试过setTimeOut，但它停止显示表而不是每隔一段时间更新它。

我的HTML按钮：

function ETArequest(button) {
 if (button == "") {
    $('#ETAcol').empty();
    return;
} else { 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            $('#ETAcol').empty();
            $('#ETAcol').append(xmlhttp.responseText);
        }
    };

    xmlhttp.open("GET","getTime.php?q="+(button.id),true);
    xmlhttp.send();

}}

我的JavaScript：

UserDetails.jsp

Answer 1

这取决于您设置超时的方式。重复函数调用的最佳方法是：

var 
    delay = 30000,
    f = function() {
        ETArequest($('button'));
        setTimeout(f, delay);
    };
setTimeout(f, delay);

这样，只有在函数完成后才会开始新的等待。

但是，在您的情况下 - 当您发送异步请求时，您应该在请求完成后启动超时：

var 
    delay = 30000,
    f = function() {
        ETArequest($('button'), f, delay);
    };
setTimeout(f, delay);

function ETArequest(button, callback, delay) {
    //... YOUR CODE

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            $('#ETAcol').empty();
            $('#ETAcol').append(xmlhttp.responseText);
            setTimeout(callback, delay);
        }
    }
}

另外请不要忘记，您必须正确设置该功能的范围和参数！

如果您使用jQuery发送AJAX，您可以像这样使用它：

var 
    delay = 30000,
    f = function() {
        ETArequest($('button')).always(function() { setTimeout(f, delay); });
    };
setTimeout(f, delay);

function ETArequest(button, callback, delay) {
    //... YOUR CODE

    return $.ajax(url, options);
}

函数ajax返回一个promise - 如果你将一个函数传递给它的always方法，它将在ajax完成后调用。有关详细信息，请参阅jQuery.ajax()。

启动和停止自动更新：

function autoupdate() {
    var 
        delay = 30000,
        f = function() {
            ETArequest($('button'), f, delay);
        };

    if (!window.autoupdate) {
        window.autoupdate = setTimeout(f, delay);
        $('button').text('Stop');
    }
    else {
        clearTimeout(window.autoupdate);
        window.autoupdate = false;
        $('button').text('Update');
    }
}

在XHR回复中：

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        $('#ETAcol').empty();
        $('#ETAcol').append(xmlhttp.responseText);

        if (false !== window.autoupdate) {
            setTimeout(callback, delay);
        }
    }
}

该按钮既可以启动也可以停止：

<button id=start onclick="autoupdate();">Update</button>

说明：当您单击“停止”按钮时，您需要清除超时但还要记住自动更新已经停止，如果您在浏览器等待响应时单击停止而没有启动新的自动更新（并且没有计时器）正在运行。）

Answer 2

您可以使用setInterval存档您想要的内容，因为另一位用户已经推荐过，可能有一个例子可以帮助您。

function doRequest(button){
  var button_id = button;
  var intervalToRun = setInterval(makeRequest, 1000, button_id);
}

function makeRequest(button){
  //your XHTML Request here
}

//Stop the interval
function intervalShouldStop(){
  clearInterval(intervalToRun);
}

请注意：Internet Explorer 9及更低版本不支持在setTimeout（）或setInterval（）链接中向pollyfill传递回调函数：https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

如何自动设置onclick重复？还是自动重复功能？

2 个答案: