Javascript 对象准备好了吗？

Question

我有一个函数，它使用 AJAX 从 php 脚本获取项目列表，并且可以传递过滤器。用户可以通过从页面上的下拉框中选择来设置过滤器。

我遇到的问题是我在页面加载期间调用该函数以使用默认数据填充表单，而当我尝试从下拉框中读取过滤器文本时该函数只是默默退出。它在页面加载后工作正常，但在页面加载期间则不然。但是，如果我在尝试从下拉列表中读取之前放置一个警报(“测试”)，则该函数可以正常工作，因此我假设在调用该函数时下拉列表尚未正确完成加载。我如何测试它是否可以安全读取，以便在不安全时我可以提供自己的默认值？

代码片段:

var ProdCat = document.getElementById("prod_cat2");             
var Filter = "All Products";

Filter = ProdCat.options[ProdCat.selectedIndex].text;

alert("test");

xr2.open("GET","hs_shop.php?ajaxreq&r=prodlist&p1=" + Filter, true);
xr2.send();

所以上面的代码位于一个名为 onLoad 的函数中，并且警报根本不会触发。但如果我注释掉 Filter = ProdCat.(etc) 行，那么警报就会触发。即使在页面加载后该行，警报也始终会触发。正在寻找一种解决方案来在加载期间和之后保持一个功能，谢谢!

Answer 1

听起来脚本位于 HTML 文件中 ProdCat 选择框的标记上方。如果是这样，最简单的方法就是简单地将包含它的 script 标记向下移动，使其位于选择框标记的下面。选择框在其标记被解析之前不会存在，但一旦解析就会立即存在。

How can I test to see if its safe to read so I can provide my own default value if it isnt safe?

如果您不想重新定位脚本(或者在其他没有意义的情况下遇到这种情况)，您可以测试是否获得了该元素:

if (ProdCat) {
    Filter = ProdCat.options[ProdCat.selectedIndex].text;
}

如果您愿意，您甚至可以重试:

var ProdCat;
var Filter = "All Products";

function startAjax() {
    ProdCat = document.getElementById("prod_cat2");
    if (ProdCat) {
        Filter = ProdCat.options[ProdCat.selectedIndex].text;
        xr2.open("GET","hs_shop.php?ajaxreq&r=prodlist&p1=" + Filter, true);
        xr2.send();
    else {
        setTimeout(startAjax, 100); // 1/10th of a second later, try again
    }
}

startAjax();

<小时/>

更新:在评论中，您说:

The error is: ProdCat.options[ProdCat.selectedIndex] is undefined

好的，您已经有了该元素，但尚未选择任何内容。所以测试是:

if (ProdCat &&                              // We have the select
    ProdCat.selectedIndex >= 0 &&           // and it has a selected value
    ProdCat.options[ProdCat.selectedIndex]  // (Paranoia) and that option exists
    ) {
    Filter = ProdCat.options[ProdCat.selectedIndex].text;
}