javascript - 为什么使用 settimeout 未定义 ajax 值返回？我如何解决它？

Question

我有两个 AJAX 函数，我需要在加载 HTML 正文时调用它们。该功能需要针对不同类型的聊天以不同的时间间隔运行，这样我可以减轻服务器上的工作负载。(请不要使用 JQuery)

function funcNamePOST(data1, data2) {
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function(){
        //Appending xml data to html in a for loop
    }
    var date = new Date();
    var datetime = date.getTime();
    xmlhttp.open("POST", "page1.php", true);

    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    var parameters = "data1="+data1+"&data2="+data2;
    xmlhttp.send(parameters);
}

function funcNameGET(data1, data2) {
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function(){
        //Appending xml data to html in a for loop
    }
    var date = new Date();
    var datetime = date.getTime();

    xmlhttp.open("GET", "page2.php?datetime="+datetime, true);

    xmlhttp.send();
}

这两个 AJAX 本身都可以正常工作，但这变得很奇怪，然后我尝试嵌套它们和/或将它们添加到时间函数中。示例:

function nest(data1, data2) {
    funcNamePOST(data1, data2); 
    funcNameGET(data1, data2);
}

或

function nest(data1, data2) {
        setTimeout( function(){
            funcNamePOST(data1, data2); 
        }, 10000);
        //I need this to run every 10 sec
        setTimeout( function(){
            funcNameGET(data1, data2);
        }, 60000);
        //I need this to run every 60 sec
    }

只有嵌套中的第二个 AJAX 执行。函数在嵌套中的顺序无关紧要，然后它在第一个函数上输出错误。

类型错误:AJAX“XML 值”返回未定义。

我知道这不是真的，因为他们自己工作得很好。

我让它工作的唯一方法是将它们放在定时函数中，但我无法通过这种方式让第一个函数每 10 秒运行一次。

function nest(data1, data2) {
        setTimeout( function(){
            funcNamePOST(data1, data2); 
            setTimeout( function(){
                funcNameGET(data1, data2);
            }, 60000);
        }, 10000);
    }

Answer 1

您的函数共享一个名为 xmlhttp 的全局变量。使用 var 在每个函数中分别声明该变量:

var xmlhttp;

现在发生的情况是，当通过覆盖 xmlhttp 的值调用时，每个函数都在“踩踏”另一个函数。通过创建两个局部变量，就不会发生这种情况。

捕获此类问题的一个好方法(至少在较新的浏览器中)是养成添加

"use strict";

作为每个函数中的第一行代码，或者如果可能作为整个脚本 block 中的第一行代码。如果这样做，您会将解释器置于“严格”模式，并且在该模式下它会将对 xmlhttp 的分配标记为错误。