每个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();
    });
};