在每次迭代中延迟地迭代对象属性

Question

This is my code:

maleBackNoZoom = {  
    parts:{
    armsRight: findItemById("29") ,
    armsLeft: findItemById("28"),
    legsRight: findItemById("21"),
    legsLeft: findItemById("22"),
    back: findItemById("24"),
    buttocks: findItemById("23"), 
    neck: findItemById("26"),
    head: findItemById("27")
     },

     illuminate: function() {
    for (prop in maleBackNoZoom.parts) {

         maleBackNoZoom.parts[prop].opacity = 1;
         paper.view.update();
    }
}       
}

I am iterating over all parts and trying to set their opacity=1.

So these commands:

maleBackNoZoom.parts[prop].opacity = 1;
paper.view.update();

should be called every n seconds

How can I add a delay on each iteration?

---

Note: I have of course read through all the question for delaying iterations in javascript but most of them have to do with arrays, not object properties traversals

Answer 1

You can create a list of properties that you want to illuminate. Then handle the illumination just like you would for an array.

illuminate: function() {
    var propertiesToIlluminate = [], prop, illuminateInternal, i = 0, delay = 1000, intervalId;
    for (prop in maleBackNoZoom.parts) {
        propertiesToIlluminate.push(prop);
    }

    illuminateInternal = function () {
        var property = propertiesToIlluminate[i];
        maleBackNoZoom.parts[property].opacity = 1;
        paper.view.update();
        i++;
        if (i === propertiesToIlluminate.length) {
            clearInterval(intervalId);
        }
    };
    intervalId = setInterval(illuminateInternal, delay);
}