每个for循环迭代后的延迟

Question

In my MVC project, I have passed a list of users to my view, and inside this view I iterate through the list and create an anchor tag for each user. Would it be possible to add a delay after each anchor tag is created? Here is my 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();
    });
};

I would like the first tag to be created and added to the map, then a delay of a second, after that the next anchor tag would be added, is this possible? Any help would be appreciated

Answer 1

you can try below code. inside setTimeout write all code that you want to do under the loop. It will get called after 1 sec

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

You could place your code in a 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

With timeouts incrementing and passing all data through a function call to a local scope the following could should do:

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

For each element of this.allData this.allData[i] is passed to the local function as data, along with each i. These are used in the inner scope for setting timeouts in intervalls of 1 sec and creating the anchor links.

Answer 4

You actually want an asynchronous loop:

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