Question

嗨，我有json数组，我希望每隔5秒显示一个下一个值

此代码从服务器获取json并将json数组发送到函数：

function myFunction() {
        $.ajax({
            type: "POST",
            url: "ws.aspx/GetQueue",
            data: "{'eventid':'" + eventID + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg != null) {
                    var obj;
                    if (msg.hasOwnProperty("d"))
                        obj = jQuery.parseJSON(msg.d);
                    else
                        obj = jQuery.parseJSON(msg);

                    setHtml(obj);
                }

                setTimeout(function () { myFunction(); }, 5000);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);

                setTimeout(function () { myFunction(); }, 5000);
            }
        });
    }

这是我发送数组后的函数：

function setHtml(obj) {
        for (var i = 0; i < obj.length; i++)
            setTimeout(function () {  $('.Summary').html("<H1>" + obj[i].QueueName + "->" + obj[i].name + ' : ' + obj[i].Queue + "</H1><br/>"); }, 5000);
    }

但是循环中的值是不确定的，为什么呢？这个问题的解决方案是什么？

Answer 1

在匿名函数中移动循环：

function setHtml(obj) {        
    setTimeout(function () {  
        for (var i = 0; i < obj.length; i++)
            $('.Summary').html("<H1>" + obj[i].QueueName + "->" + obj[i].name + ' : ' + obj[i].Queue + "</H1><br/>"); 
    }, 5000);
}

然后阅读有关javascript闭包的内容。在您的版本中，i的值是离开外部函数（setHtml）时的值，即obj.length。

Answer 2

这是因为当setTimeout运行时，i的值将等于obj.length。

function setHtml(obj) {
    for (var i = 0; i < obj.length; i++) {
        (function(cObj){
            setTimeout(function () {  $('.Summary').html("<H1>" + cObj.QueueName + "->" + cObj.name + ' : ' + cObj.Queue + "</H1><br/>"); }, 5000);
        })(obj[i]);
    }
}

Answer 3

问题是，在调用setTimeout函数时，i的值已发生变化。 i始终为obj.length，obj[obj.length]始终为undefined。相反，使用Array.forEach()或$.each()来迭代您的数组：

function setHtml(obj) {
    $.each(obj, function(i, val) {
        setTimeout(function () {
            $('.Summary').html("<H1>" + val.QueueName + "->" + val.name + ' : ' + val.Queue + "</H1><br/>");
        }, 5000);
    });
}

这会将您的setTimeout代码包装在自己的范围内，以便不会更改变量。

或者，将setTimeout的调用放入其自己的函数中：

function setHtml(obj) {
    for (var i = 0; i < obj.length; i++) {
        setSummaryHtml(obj[i]);
    }
}
function setSummaryHtml(val) {
    setTimeout(function () {
        $('.Summary').html("<H1>" + val.QueueName + "->" + val.name + ' : ' + val.Queue + "</H1><br/>");
    }, 5000);
}

Answer 4

您已经datatype:json，因此无需执行JSON.parseJSON。通过将其设置为datatype：json，它将返回一个javascript对象，所以

if (msg.hasOwnProperty("d"))
         obj = jQuery.parseJSON(msg.d);
 else
         obj = jQuery.parseJSON(msg);

可以就是这个

if (msg.hasOwnProperty("d"))
         obj = msg.d;
 else
         obj = msg;

你还需要在setTimeout函数中循环闭包

for (var i = 0; i < obj.length; i++) {
  (function (ii) {
    setTimeout(function () {
      $('.Summary').html("<H1>" + obj[ii].QueueName + "->" + obj[ii].name + ' : ' + obj[ii].Queue + "</H1><br/>");
    }, 5000);
  })(i);
}

Answer 5

谢谢，除了用于处理循环内部的json值的线程外，所有都是答案。完整的答案是将元素添加到队列中，如下代码所示：

$.each(obj, function (i, val) {                                
                        $('.Summary').delay(5000).queue(function (n) {
                                str = "<H1>" + val.QueueName + "->" + val.name + ' : ' + val.Queue + "</H1><br/>";
                                console.log(str);
                                $(this).html(str);
                                n();
                            });
                    });

javascript anonymus settimeout函数队列值

5 个答案: