JS函数只能调用一个方法 - JS Function Can Only Call One Method

JS Function Can Only Call One Method

本文关键字：一个方法函数调用 JS | 更新日期: 2023-09-27

我写了一个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元素，单独工作正常。关于如何让这些同时工作的任何想法？

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

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

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

要更正此问题，请在前面添加var：

var async = new XMLHttpRequest();

你忘了用var声明"async"变量：

var async = new XMLHttpRequest();

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