JavaScript仅在函数运行一次后才有效[重复]

Question

这个问题在这里已有答案：

• What is the DOM ready event? 4个答案
• Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference 6个答案

我有一个脚本，从json数据调用，以显示给定时间在网页上的人。我有一个函数在我页面的最底部调用一次。然后有一个定时器，每隔5秒调用一次。

代码最初运行时，没有任何反应。 alert(visListHtml);是空的。但是当它在计时器上运行时，tt工作正常。

知道是什么导致它在第一次运行时变空了吗？ Google DEV工具显示getJSON返回的数据。如果我在for循环中发出警报。它每次弹出都很好。

它只是第一次运行，它什么也没做。 visListHtml是空的。我有以下代码：

var prev_GetLiveVisitorList = "";
var visListHtml = '';
function GetLiveVisitorList() {

        $.getJSON('<?php echo $apiEndpoint; ?>?cmd=GetLiveVisitorList&rnd'+Math.random(), function (allStatusJSON) {

          for (i in allStatusJSON.websiteVisitor) {
                visipAddr   = allStatusJSON.websiteVisitor[i].visipAddr;
                vistime     = allStatusJSON.websiteVisitor[i].vistime;
                visLandingPage = allStatusJSON.websiteVisitor[i].visLandingPage;
                visRefPage = allStatusJSON.websiteVisitor[i].visRefPage;

                visListHtml += '<div class="media"><span class="avatar status-success"><img src="../assets/img/avatar/1.jpg" alt="..."></span><div class="media-body"><p><strong>'+visipAddr+'</strong><time class="float-right" datetime="2018-07-14 20:00">'+vistime+'</time></p><p class="fs-14 semibold">Landing page: '+visLandingPage+'</p><p>Reffered By: '+visRefPage+'</p></div></div>';

            }
        });

            alert(visListHtml);

            if (prev_GetLiveVisitorList != visListHtml) {
                document.getElementById("GetLiveVisitorList").innerHTML = visListHtml;
                prev_GetLiveVisitorList = visListHtml;
            }
     }  

Answer 1

我缩进了代码并在代码中解释了发生了什么。在这两种情况下（第一次然后使用计时器）不起作用：

var prev_GetLiveVisitorList = "";
var visListHtml = '';
function GetLiveVisitorList() {
  $.getJSON('<?php echo $apiEndpoint; ?>?cmd=GetLiveVisitorList&rnd'+Math.random(), function (allStatusJSON) {
    for (i in allStatusJSON.websiteVisitor) {
      visipAddr   = allStatusJSON.websiteVisitor[i].visipAddr;
      vistime     = allStatusJSON.websiteVisitor[i].vistime;
      visLandingPage = allStatusJSON.websiteVisitor[i].visLandingPage;
      visRefPage = allStatusJSON.websiteVisitor[i].visRefPage;
      visListHtml += '<div class="media"><span class="avatar status-success"><img src="../assets/img/avatar/1.jpg" alt="..."></span><div class="media-body"><p><strong>'+visipAddr+'</strong><time class="float-right" datetime="2018-07-14 20:00">'+vistime+'</time></p><p class="fs-14 semibold">Landing page: '+visLandingPage+'</p><p>Reffered By: '+visRefPage+'</p></div></div>';
    }
  });

  /**
  * First time visListHtml is empty because AJAX call is happening async below this line
  * When you said using the timer works, it's not working, is showing the result of the first time well
  * but is not showing the result of the second real time
  **/
  alert(visListHtml);

  if (prev_GetLiveVisitorList != visListHtml) {
    document.getElementById("GetLiveVisitorList").innerHTML = visListHtml;
    prev_GetLiveVisitorList = visListHtml;
  }
}

1. visListHtml初始化为空字符串，这是第一次显示，因为$ .JSON正在运行异步并且仍然没有数据
2. 使用计时器，“正常工作”意味着“visListHtml”由第一个$ .JSON调用填充并显示该调用的结果但未显示由计时器触发的当前$ .JSON
3. 要修复它，你需要在$ .JSON修改DOM或执行你真正需要的操作后使用visListHtml希望这有助于:)）