Question

我正在开发一个模拟器来模拟网页中的用户操作。在特殊情况下，页面上有几个按钮，每个按钮都会更改页面内容。我以编程方式单击每个按钮，然后想要提取添加到页面的新内容。如果您看一下：

http://www.elementbars.com/Build-a-Bar-Service.aspx#

你可以找到一个例子。

我的代码是这样的：

for (var int i=0; i< buttonArray.length; i++){ // buttonArray is the array of buttons
    triggerClickEvent(buttonArray[i]);
    extractNewContent();
}

function triggerClickEvent (clickableElement) {
   jQuery(clickableElement).trigger('click');
}

triggerClickEvent和extractNewContent都正常工作，但问题是在触发click事件后，JavaScript引擎应该等待一段时间以确保添加新内容，但它不会按预期运行。例如，我注意到单击了所有按钮，但extractNewContent为第一个按钮提取内容，这意味着这两个函数不能同步工作。我使用了setTimeout函数，但由于它不会阻止执行，因此无法解决问题。我还使用函数检查文档的状态，但不能正常工作。

如果你能帮助我，我将不胜感激。

感谢。

Answer 1

最简单的方法是使用像jQuery这样的工具包。像这样：

jQuery(document).ready(function() {
...
});

或更简洁

jQuery(function() {

});

问题的一部分是“就绪”在浏览器中没有标准化。像jQuery这样的工具包可以弥补这一点。

Answer 2

你可以将参数传递给触发函数，其中一个就是我们的情况下的callBack函数extractNewContent。在单击事件处理程序中完成所有修改后调用此函数。所以处理程序将是

$(clickableElement).on('click', function(event, callback){
                       ...
                       all DOM modifications goes here
                       ...
                       if(typeof callback === "function")
                           callback();
                       }

然后使用extractNewContent作为参数

触发它

$(clickableElement).trigger('click',extractNewContent);

Answer 3

以下代码有效：

for (var int i=0; i< buttonArray.length; i++){ // buttonArray is the array of buttons
  triggerClickEvent(buttonArray[i]);
  alert('balalalala'); // if you remove this, it won't work.
  extractNewContent();
}

function triggerClickEvent (clickableElement) {
 jQuery(clickableElement).trigger('click');
}

如何检查文档是否已准备好在JavaScript中？

3 个答案: