Generate JS function in loop

Question

I would like generate js function in loop, but I have problem. Please, can anybody tell that my thinking is right ? It's is possible to generate functions in loop?

var sortItems =
                    ["sortable11","sortable12","sortable13","sortable14","sortable15",
                    "sortable21","sortable22","sortable23","sortable24","sortable25",
                    "sortable31","sortable32","sortable33","sortable34","sortable35",
                    "sortable41","sortable42","sortable43","sortable44","sortable45",
                    "sortable51","sortable52","sortable53","sortable54","sortable55"];
                for ( key in sortItems) {
                    $(function(){
                        $('#' + sortItems[key]).sortable({
                            update: function(event, ui)
                            {
                                $.ajax({
                                    type: "POST",
                                    url: "fun/saveOrder.php",
                                    dataType: "text",
                                    data: 
                                        {
                                        key:$(this).sortable('toArray')
                                    },
                                    cache: false,
                                    beforeSend: function(){$('#updateResult').html('updating');},
                                    success: function(data){$('#updateResult').html(data);},
                                    error: function(data){$('#updateResult').html(data);}
                                })
                                recalculate();
                            }
                        })
                    })
                }

Is this a JS[H|L]int warning or do you actually have a problem with the code? If the latter, please add more details on your expected behavior and what happens. — Fabrício Matté, Apr 17 '13 at 13:16
$(function(){...}) is an alias for $(document).ready(function(){}) I'm quite sure it is not what you are looking for here — A. Wolff, Apr 17 '13 at 13:17
Use a common `[class]` rather than a bunch of similar `[id]`s — zzzzBov, Apr 17 '13 at 13:19
duplicate of [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Bergi, Apr 17 '13 at 13:27
and have a look at [Why is using “for…in” with array iteration such a bad idea?](http://stackoverflow.com/q/500504/1048572) — Bergi, Apr 17 '13 at 13:29

score 0 · Answer 1 · edited May 23 '17 at 12:28

It's prefectly fine to generate functions in loops in JavaScript, syntactically speaking.

It's not recommended though : if you have a large number of objects, generating lots of closures (this is what the anonymous functions you're creating are called) can be slow. But I doubt you'll be running into that.

Another reason why it's not recommended is that the key variable you're using inside your function is a reference to a var that's the exact same variable, outside of the closure, thus rendering your loop completely useless in practice. Maybe check this question out, it could help.

Without knowing more about the issue you're facing it's pretty hard to say more.

score 0 · Answer 2 · answered Apr 17 '13 at 13:25

If you first generate an array of DOM elements, you can drop the for-loop:

var sortItems = ["sortable11","sortable12","sortable13","sortable14","sortable15",
                    "sortable21","sortable22","sortable23","sortable24","sortable25",
                    "sortable31","sortable32","sortable33","sortable34","sortable35",
                    "sortable41","sortable42","sortable43","sortable44","sortable45",
                    "sortable51","sortable52","sortable53","sortable54","sortable55"],
sortElements = $.map(sortItems, function(id) {
    return document.getElementById(id);
});

$(sortElements).sortable({
   // your options here
});

Also, your loop was doing $(function() { ... } at every iteration; it's only required once, so you can wrap it around above code (or move this code to the end of your <body> element.

Thanks for Your replies, Jack Your solution work great, but I would like have a separate information in which sortable box elements was change position, — joker, Apr 17 '13 at 14:43

score 0 · Answer 3 · answered Apr 17 '13 at 13:27

It is possible to generate/create functions in a loop. One of the ways it could be done:

var test = ['name','phone','address'];
var test2 = [];
$.each(test,function(k,v){ test2[k] = function(){alert(v)}});

test2[0]; //alerts 'name'
test2[1]; //alerts 'phone'
test2[2]; //alerts 'address'

Generate JS function in loop

3 Answers3