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

每次循环迭代后延迟

4 个答案: