Question

嘿我试图找出如何让我的脚本在加载元素时执行其中的一部分等待，但是目前它主要是通过它，而不是等待它。在vanilla js中做到这一点的最佳方法是什么？

这是代码

this.heading = document.getElementById("heading");

我希望它等待或重复检查，直到标题每次都确定

谢谢

Answer 1

在加载模板后执行此操作。反复检查是否发生了某些事情（轮询）通常是一个坏主意。这应该发生因为加载了模板。在您的情况下，它看起来像goToRoute：

goToRoute: function (htmlName) {
    (function(scope) { 
        var url = 'views/' + htmlName,
            xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                scope.rootElem.innerHTML = this.responseText;

                // Now it's ready

            }
        };
        xhttp.open('GET', url, true);
        xhttp.send();
    })(this);
}

将您考虑的特定代码放入goToRoute可能没有意义;为了使它更通用，您可以考虑让goToRoute接受回调参数或使用事件。

Answer 2

您可以反复检查标题，然后在获得此标题后再对其进行操作。

var heading;

function getHeading() {
    var interval = setInterval(function() {
        if (heading = document.getElementById('heading')) {
            clearInterval(interval);
            console.log(heading);
            // do some stuff here with your heading
        }
    }, 100);  // 100 represents how often the script checks for existence of heading in ms
}

getHeading();

Vanilla js如何在执行脚本之前检查html元素是否存在

2 个答案: