javascript anonymus settimeout 函数队列值答案

【问题标题】：javascript anonymus settimeout function queue valuesjavascript anonymus settimeout 函数队列值
【发布时间】：2013-01-14 13:44:28
【问题描述】：

嗨，我有一个 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);
    }

但是循环内的值是未定义的，这是为什么呢？这个问题的解决方法是什么？

【问题讨论】：

哪些值？请说得更具体些。

标签： javascript jquery jsonp

【解决方案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。

【讨论】：

【解决方案2】：

您已经拥有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);
}

【讨论】：

【解决方案3】：

这是因为当 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]);
    }
}

【讨论】：

【解决方案4】：

问题是当你的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);
}

【讨论】：

【解决方案5】：

谢谢，除了wirey处理循环内的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();
                            });
                    });

【讨论】：