Question

<button id="getInfo">Get information</button>
<div id="infoResponse"></div>

<script>
document.getElementById('getInfo').addEventListener('click', function(){
    getInfo();
}, false);

function getInfo() {
    var xml = new XMLHttpRequest();

    xml.onreadystatechange = function() {
        if(xml.readyState == 4 && xml.status == 200) {
            document.getElementById('infoResponse').innerHTML = xml.responseText;
        }
    };

    xml.open('GET', 'test.php', true);
    xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xml.send(null);
}
</script>

如果用户多次点击该按钮，如何停止再次运行请求？我想实现类似于jQuery one（）事件函数

的东西

谢谢

Answer 1

单击回调可以通过在某处设置状态来了解另一个点击回调。

如果你有一个旋转加载器，你可以查找它，所以如果$('.spinner').length > 0那么你就不会继续在.getInfo()内发出XHR请求。

您还可以取消绑定并重新绑定事件侦听器。 Onclick，取消绑定，并在XHR的成功回调中重新绑定点击处理程序。

许多人中的两种策略。祝你好运！

Answer 2

我带来的解决方案是感谢@KevinB

**document.getElementById('test').addEventListener('click', getInfo);**

**function getInfo(e) {**
var xml = new XMLHttpRequest();

**e.target.removeEventListener(e.type, arguments.callee);**

xml.onreadystatechange = function() {
    if(xml.readyState == 4 && xml.status == 200) {
        document.getElementById('infoResponse').innerHTML = xml.responseText;
    }
};

xml.open('GET', 'test.php', true);
xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xml.send(null);

}

如何停止多个ajax请求？

2 个答案: