javascript - 管理在 JavaScript 中的动态元素中制作的计时器

Question

实际上，我正在通过 AJAX 从数据库中检索一些数据，在检索数据时，我使用 JavaScript 在 HTML 中创建了一些动态元素。我在一个容器中创建了动态行，在该行中我创建了一个动态 div，其类是“col-md-4”，它是父行的子级，这意味着至少可以有 3 个类为“col-md-”的动态 div 4"在动态行中。为此，在 AJAX 的 obj.success 函数中使用了一个循环。使用循环在动态行中制作3个动态元素的目的。如果不使用循环，那么新行将只有一个 col-md-4 类的 div。

现在的问题是我从数据库中检索一些时间，然后获取当前时间我得到两个时间的差异，然后使用一个函数来运行时间。这一切都是循环。现在的问题是计时器只对行中的最后一个元素运行。我在另一个场景中使用了计时器，但是没有问题，因为在那个场景中没有使用循环。

var ajax = prompt('Confirm demo or paste AJAX data', '[ {"id":1}, {"id":2}, {"id":3}, {"id":4}, {"id":5}]');
display(ajax);
function display(response) {
    var n=1;
    var times = ["2019-09-19 12:59","2019-09-27 12:59","2019-12-19 12:59","2019-11-19 12:59","2019-10-19 12:59"];
    var time=new Date().toLocaleTimeString('en-GB');
           var res = time.slice(0,-3);
    var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); 
        var yyyy = today.getFullYear();
        today = yyyy + '-' + mm + '-' + dd;
        var current=today+" "+res;
      //  alert(current);
    var data = JSON.parse(response);
    if(data.length) {
        for(var i=0;i<data.length;i++) {
            var parent= document.getElementsByClassName('carousel')[0];
            var row1= document.createElement("div");
            row1.setAttribute("class", "row");
            row1.setAttribute("id", "row"+n);
            parent.appendChild(row1);
            var crow1;
            for(var j=0;j<3 && i+j < data.length;j++) {
              crow1 = document.createElement("div");
              crow1.setAttribute("class", "col-md-4");
              crow1.setAttribute("id", data[i+j].id);
              crow1.innerText = "data" + (i+j)+" ";
              row1.appendChild(crow1);
              var distance = (new Date(times[0])).getTime() - (new Date(current)).getTime();
              var lmn = Math.floor(Math.random() *999999999999);
               var timer = document.createElement("h");
                            timer.setAttribute("id",lmn);
                            crow1.appendChild(timer);
                        var x = setInterval(function() {
                        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                        
                        document.getElementById(lmn).innerHTML =days + "days " + hours + "hours " + minutes + "mins " + seconds + "secs ";
                            distance -= 1000;
                     if (distance < 0) {
                    clearInterval(x);
                    document.getElementById(lmn).innerHTML = "¡El tiempo de partida ha comenzado!";

                }
            }, 1000);
            }
            i += 3-1;
            n++;
        }

    }
}

DIV.col-md-4 {
  display: inline;
  background-color: #FF0080;
  margin: 5px;
}
.row {
  display: block;
  background-color: #80E080;
  padding: 3px;
}

<div class="carousel">
</div>

为什么只有最后一个元素显示计时器？

Answer 1

您遇到的行为是同步工作流问题中的典型异步函数。在您的 setInterval 回调中，您使用的是值 lmn。当回调函数访问此变量时，代码流将循环遍历循环，lmn 将保留最大循环索引值。

因此，为了解决这个问题，您将异步函数包含在一个闭包函数调用中，并将在该回调中使用的变量(在异步方法外部设置)发送回作为该闭包调用的参数。检查下面的代码示例，我已经用闭包调用更新了它。

为了更好地理解这是如何工作的，请在您的调试控制台中放置一个检查点，该检查点位于您在异步回调中使用 lmn 变量的位置，有和没有闭包调用。

要了解有关闭包的更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

var ajax = prompt('Confirm demo or paste AJAX data', '[ {"id":1}, {"id":2}, {"id":3}, {"id":4}, {"id":5}]');
display(ajax);

function display(response) {
var n = 1;
var times = ["2019-09-19 12:59", "2019-09-27 12:59", "2019-12-19 12:59", "2019-11-19 12:59", "2019-10-19 12:59"];
var time = new Date().toLocaleTimeString('en-GB');
var res = time.slice(0, -3);
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
var current = today + " " + res;
//  alert(current);
var data = JSON.parse(response);
if (data.length) {
    for (var i = 0; i < data.length; i++) {
        var parent = document.getElementsByClassName('carousel')[0];
        var row1 = document.createElement("div");
        row1.setAttribute("class", "row");
        row1.setAttribute("id", "row" + n);
        parent.appendChild(row1);
        var crow1;
        for (var j = 0; j < 3 && i + j < data.length; j++) {
            crow1 = document.createElement("div");
            crow1.setAttribute("class", "col-md-4");
            crow1.setAttribute("id", data[i + j].id);
            crow1.innerText = "data" + (i + j) + " ";
            row1.appendChild(crow1);
            var distance = (new Date(times[0])).getTime() - (new Date(current)).getTime();
            var lmn = Math.floor(Math.random() * 999999999999);
            var timer = document.createElement("h");
            timer.setAttribute("id", lmn);
            crow1.appendChild(timer);
            (function(l, d){
              var x = setInterval(function() {
                  var days = Math.floor(d / (1000 * 60 * 60 * 24));
                  var hours = Math.floor((d % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                  var minutes = Math.floor((d % (1000 * 60 * 60)) / (1000 * 60));
                  var seconds = Math.floor((d % (1000 * 60)) / 1000);

                  document.getElementById(l).innerHTML = days + "days " + hours + "hours " + minutes + "mins " + seconds + "secs ";
                  d -= 1000;
                  if (d < 0) {
                      clearInterval(x);
                      document.getElementById(l).innerHTML = "¡El tiempo de partida ha comenzado!";

                  }
              }, 1000);

            })(lmn, distance); // This is called a closure function, use this when you are using async methods in synchronous code blocks
        }
        i += 3 - 1;
        n++;
    }

}
}

DIV.col-md-4 {
  display: inline;
  background-color: #FF0080;
  margin: 5px;
}
.row {
  display: block;
  background-color: #80E080;
  padding: 3px;
}

<div class="carousel">
</div>