每個for循環迭代后的延遲

Question

在我的MVC項目中，我已將用戶列表傳遞給我的視圖，並在該視圖內遍歷該列表並為每個用戶創建一個定位標記。 創建每個錨標記后是否可以添加延遲？ 這是我的jQuery：

DeskFunction.prototype.init = function() {
    var self = this;
    var element;
    this.allData = @Html.Raw(@JsonConvert.SerializeObject(Model.AllDeskData));
    for (var i = 0; i < this.allData.length; i++) {
        element = $("<a href='#' class='deskBtn tooltip fancybox' title='" + this.allData[i].Name + "' data-name='" + this.allData[i].UserName + "' data-department='" + this.allData[i].DepartmentName + "'></a>");

        $(element).css({
            "top": this.allData[i].DeskYCoord,
            "left": this.allData[i].DeskXCoord
        }).appendTo(".map").show('normal').delay(3000);

        $(element).on('click', function() {
            var user = $(this).attr("data-name");
            $.ajax({
                url: "/Home/GetUserData",
                type: "GET",
                data: { user: user },
                success: function(data) {
                    $(".user-data .name").text(data.displayName);
                }
            });
        });
    }

    $('.tooltip').tooltipster();

    $('.search-user').keyup(function() {
        self.search();
    });
};

我想創建第一個標簽並將其添加到地圖，然后延遲一秒鍾，之后添加下一個錨標簽，這可能嗎？ 任何幫助，將不勝感激

Answer 1

您可以嘗試以下代碼。 在setTimeout內，編寫您要在循環下執行的所有代碼。 1秒后會被調用

for (var i = 0; i < this.allData.length; i++) {
    (function(i, self ){
        setTimeout(function(){
            // ALL LOOP CODE HERE
            // use self.allData
        }, 1000);
    }(i, self ));
}

Answer 2

您可以將代碼放在setTimeout中。

DeskFunction.prototype.init = function() {
    var self = this;
    var element;
    this.allData = @Html.Raw(@JsonConvert.SerializeObject(Model.AllDeskData));
    for (var i = 0; i < this.allData.length; i++) {

        element = $("<a href='#' class='deskBtn tooltip fancybox' title='" + this.allData[i].Name + "' data-name='" + this.allData[i].UserName + "' data-department='" + this.allData[i].DepartmentName + "'></a>");

        $(element).css({
            "top": this.allData[i].DeskYCoord,
            "left": this.allData[i].DeskXCoord
        }).appendTo(".map").show('normal');

        setTimeout(function(){
            $(element).on('click', function() {
                var user = $(self).attr("data-name");
                $.ajax({
                    url: "/Home/GetUserData",
                    type: "GET",
                    data: { user: user },
                    success: function(data) {
                        $(".user-data .name").text(data.displayName);
                    }
                });
            });
        }, 3000);
    }

    $('.tooltip').tooltipster();

    $('.search-user').keyup(function() {
        self.search();
    });
};

Answer 3

隨着超時的增加，並通過函數調用將所有數據傳遞到本地作用域，應該可以執行以下操作：

for(var i in this.allData) {

 // create local function scope saving i and data from being altered by next iterations
 (function(i, data) {
   setTimeout(function() {
    // place your code here, using data (and i)

  }, i*1000);

 })(i, this.allData[i]);
}

對於this.allData的每個元素，this.allData [i]與每個i一起作為數據傳遞到本地函數。 這些在內部作用域中用於以1秒的間隔設置超時並創建錨鏈接。

Answer 4

您實際上想要一個異步循環：

DeskFunction.prototype.init = function() {

    this.allData = @Html.Raw(@JsonConvert.SerializeObject(Model.AllDeskData));

    var self = this,
        allData = this.allData,
        delay = 1000;

    var appendDeleteLink = function appendDeleteLink(i) {
        if (i >= allData.length) {
            return;
        }

        var element = $("<a href='#' class='deskBtn tooltip fancybox' title='" + allData[i].Name + "' data-name='" + allData[i].UserName + "' data-department='" + allData[i].DepartmentName + "'></a>");

        $(element).css({
            "top": allData[i].DeskYCoord,
            "left": allData[i].DeskXCoord
        }).appendTo(".map").show('normal').delay(3000);

        $(element).on('click', function() {
            var user = $(this).attr("data-name");
            $.ajax({
                url: "/Home/GetUserData",
                type: "GET",
                data: { user: user },
                success: function(data) {
                    $(".user-data .name").text(data.displayName);
                }
            });
        });

        (function(a) {
            setTimeout(function() {
                appendDeleteLink(a);
            }, delay);
        })(++i);
    };

    appendDeleteLink(0);

    $('.tooltip').tooltipster();


    $('.search-user').keyup(function() {
        self.search();
    });
};