Question

我编写了一个js函数，它通过php查询异步联系服务器到一个看起来像这样的表：

function grabber(url, element)
{
    async = new XMLHttpRequest();
    async.onreadystatechange=function()
    {
        if (async.readyState==4 && async.status==200)
        {
            document.getElementById(element).innerHTML=async.responseText;
        }
    }
    async.open("GET", url, true);
    async.send();
}

然后，我有另一个函数，当元素的事件处理程序被触发时，它使用不同的参数调用此函数两次，以获取两个当前空元素的两个数据流。令我困惑的是，他们两个都无法同时工作。当它们是函数中唯一的方法时它们都工作，但是当它们在一起时，只有其中一个有效。订单无关紧要。

$('.box').keyup(function() {
    grabber("herp.php?q=" + $(this).val(), "rice");
    //grabber("derp.php?q=" + $(this).val(), "gohan");
});

无论位置如何，

derp似乎优先，而herp仅在derp被注释掉时才起作用。 php文件只输出常规的html元素，并且单独工作。关于如何让它们同时工作的任何想法？

Answer 1

当您需要创建局部变量时，您正在创建全局变量：

async = new XMLHttpRequest(); // creates this.async, which probably means
                              // window.async

这样做的结果是，当多次调用grabber时，每个调用都会用新请求覆盖先前的async值。这反过来意味着当你的每个回调最终执行时，它使用的是async的最后一个值的结果 - 这会导致所有目标元素获得相同的innerHtml。

要解决此问题，请在前面添加var：

var async = new XMLHttpRequest();

Answer 2

您忘记使用var声明“async”变量：

var async = new XMLHttpRequest();

如果没有var关键字，它就是一个全局变量。因此，连续的调用会覆盖前一个调用。

JS函数只能调用一个方法

2 个答案: