Add Delay to For Loop

Question

I tried the solution found here: How do I add a delay in a JavaScript loop? but I could not make it work for me.

    jQuery.fn.createEntry = function () {
        $("#List").append('<span>New Entry</span>');
        $("#List span").draggable({ grid: [30,45] });
    }

    jQuery.fn.tenTimes = function() {
        for (var i = 1; i <= 10; i++){
            $(document).createEntry();
        }
    }

In the .createEntry() script, the new object is binded to a .draggable() plugin I have. I'm using a keyboard shortcut (keyup) to run this tenTimes function(). If I press the key more than once too quickly, many of the new objects won't be draggable. It's seemingly random which objects fail to become draggable. I thought perhaps my rapid keypresses disrupt the bind event for the ones that fail, but even if I go slow, some don't become draggable.

Is there some way I could check to see if the object was binded properly, before moving on with the for loop? Is there a strictly better approach? Unfortunately, this isn't an animation, so I can't use .delay().

SOLUTION

It was a 3rd script I had going that handled the elements using appendTo() to that was causing the issue.

Using append() or appendTo() seemed to keep the object binded with the draggable, but it loses its left/top css along the way, so it can't be dragged. Rather than figuring out some .css() hack (the values are unique for each), I simply created a brand new element, and copied the relevant data over, then remove() the old one. Draggable is binded to it properly at some other point. With this, the problem is fixed.

@joeframbach - I added the function; its very bare, hence why I omitted it, but it could be syntax that's breaking it. — C_K, Apr 17 '12 at 05:27
@joeframbach - appendTo() seems to be the problem, the element remains binded to the draggable or something; in either case, if I simply create a brand new img element, and copy the relevant data over, I get no issues. — C_K, Apr 22 '12 at 03:10

Landin Martens · Answer 1 · 2012-04-17T05:09:44.933

1

EDIT

Try .setTimeout()

I did not read that you said .Delay() can not be used.

edited Apr 17 '12 at 05:09

answered Apr 17 '12 at 04:48

Landin Martens

3,283
12
43
61

Try reading the question again. *"Unfortunately, this isn't an animation, so I can't use .delay()."* – Ry- Apr 17 '12 at 04:49

score 0 · Answer 2 · answered Apr 17 '12 at 05:30

As an aside, you may find a slight performance benefit by replacing

jQuery.fn.createEntry = function () {
    $("#List").append('<span>New Entry</span>');
    $("#List span").draggable({ grid: [30,45] });
}

with

jQuery.fn.createEntry = function () {
    $("#List").append($('<span>New Entry</span>').draggable({ grid: [30,45] }));
}

Because you probably don't want to reapply draggable to all of your already-existing spans.

Actually, that's probably what's breaking your code. The first span has draggable reapplied to it 10 times. Is draggable idempotent?

Add Delay to For Loop

2 Answers2