Question

我正在尝试编写一个元素填充后运行的函数我写了一个简单的小块来演示我想要做的事情。我希望在myFunction运行完毕后，当元素dummy具有文本时显示运行函数。整个想法是等待一个函数运行另一个函数并使用具有数据的元素作为启动第二个函数的触发器。

<body>
        <script>
            function myFunction()
            {
                 document.getElementById('dummy').innerHTML = "some text";
            }
            //start this function after elemnet dummy contains "some text"
            function AlertAfterDummyHasText()
            {
                alert("dummy now has text");
            }
        </script>

        <div id='dummy'> </div>

        <input type="button" onclick="myFunction" class="btn btn-fill" value="fillTextBox" name="filleTextBox" />

</body>

Answer 1

function elementChange(success) {
  if(success()) { alert('added text') }
}

function addText() {
  document.getElementById('mainbar').innerHTML = "Hello"; 
  elementChange(function() {
    return true;
  });
}

Answer 2

为什么不呢：

document.getElementById('dummy').innerHTML = "some text";
alert("dummy now has text");

Javascript将运行第一个命令，将HTML放入#dummy，然后警告它有文本。

Answer 3

编辑，现在您已发现文本在异步操作中已更改。

有多种选择：

挂钩异步事件代码的完成回调，该代码更改dummy的文本，以便您可以发送通知或在文本更改后调用其他函数。如果这是你的所有代码，那么这可能是最简单的方式和最可靠的方式。
创建一个mutation observer，监视dummy元素的更改，当发生正确的更改类型时，您可以执行您的功能。现在标准的变异观察者需要IE11 +。
在定期计时器中轮询告诉，以查看您何时发现更改。虽然这对于它的简单性很有吸引力但是使用这种设计模式通常是一个坏主意，因为它对移动设备中的电池寿命有害并且会有某种定时器延迟，因为你不能/不应该超快速地轮询

如果这是你的所有代码，那么对于第一个选项，你只需调用myFunction()然后立即调用其他函数。文本的设置是同步的（没有延迟，它会立即发生）所以你不需要等待任何事情。调用myFunction()后，文本即可。

myFunction();
AlertAfterDummyHasText();

Answer 4

如果我理解正确，您应该在AlertAfterDummyHasText内添加myFunction的执行。

function myFunction()
{
  document.getElementById('dummy').innerHTML = "some text";
  AlertAfterDummyHasText();
}

function AlertAfterDummyHasText()
{
  alert("dummy now has text");
}

Answer 5

使用相对较新的mutation observers可以听取非div等非用户元素内容的更改，但是有一个原因导致您无法在调用之后调用所需的函数设置值？

function myFunction() {
    document.getElementById('dummy').innerHTML = "some text";
    AlertAfterDummyHasText();
}

如果您在多个地方执行此操作并发现这很乏味，您可以随时创建一个辅助函数来设置innerHTML，然后为您调用函数。

等待元素没有文本javascript

5 个答案: