在JS循环方面需要帮助

Question

I have such function, that adds a grid of droppables:

function AddClassroomDrops(grid, weeks, days, times) {
    for(week = 1; week <= weeks; week++) {
        for (day = 1; day <= days; day++) {
            for (time = 1; time <= times; time++ ) {
                Droppables.add('container_grid'+ grid + '_week' + week + '_day' + day + '_time' + time, {
                    accept: 'pair',
                    hoverclass : 'hovered_receiver',
                    onDrop: function(pair, receiver) {
                        new Ajax.Request(
                          '/pairs/'+pair.id+'/update_on_drop', {
                            method : 'put',
                            parameters : {
                              classroom : grid,
                              week : week,
                              day : day,
                              time : time,
                              container : receiver.id
                            }
                          }
                        );
                      }
                });
            }
        }
     }
}

The problem is that params of Ajax.Request (week, day, time) are always equal to weeks + 1, times + 1, days + 1. But they must vary according to the cycle. Oh, yes - Droppables is from script.aculo.us framework.

Answer 1

The problem is with your understanding of closures. The value of week, day, etc. which are local variables in the enclosing function will be the last value at the time of AddClassroomDrops' completion of execution. The typical way to avoid this is returning a function and passing the local variable to yet another function. For example:

function enclosing()
{
   for(var i = 0; i < 10; i++)
   {
       var f = function(j) { return function closureFunc() { // use j here }; }(i);
       // here you can do Droppables.add(f);
   }
}

Answer 2

This works after shaman dances:

function AddClassroomDrops(grid, weeks, days, times) {
    for(week = 1; week <= weeks; week++) {
        for (day = 1; day <= days; day++) {
            for (time = 1; time <= times; time++ ) {
                var drop = function(week, day, time) {
                    Droppables.add('container_grid'+ grid + '_week' + week + '_day' + day + '_time' + time, {
                        accept: 'pair',
                        hoverclass : 'hovered_receiver',
                        onDrop: function(pair, receiver) {
                            new Ajax.Request(
                              '/pairs/'+pair.id+'/update_on_drop', {
                                method : 'put',
                                parameters : {
                                  classroom : grid,
                                  week : week,
                                  day : day,
                                  time : time,
                                  container : receiver.id
                                }
                              }
                            );
                          }
                    });
                 }
              drop(week, day, time);
            }
        }
    }
}