遍历一个javascript对象 [英] loop through a javascript object

问题描述

我有一个看起来像这样的javascript对象

I have a javascript object that looks like this,

var telephones = {
        /*
        "phone" : {
            duration    :   time it takes to animate element in,
            leftIn      :   position of element once on the incoming animation
            leftOut     :   position of element on the outgoing animation
            delay       :   delay between two animations
        }
        */
        "phone1": {
            duration    :   850,
            leftIn      :   "408px",
            leftOut     :   "9999px",
            delay       :   0,
        },
        "phone2" : {
            duration    :   600,
            leftIn      :   "962px",
            leftOut     :   "999px",
            delay       :   setDelay(),
        },
        "phone3" : {
            duration    :   657,
            leftIn      :   "753px",
            leftOut     :   "9999px",
            delay       :   0,
        },
        "phone4" : {
            duration    :   900,
            leftIn      :   "1000px",
            leftOut     :   "9999px",
            delay       :   setDelay(),
        },
        "phone5" : {
            duration    :   1200,
            leftIn      :   "800px",
            leftOut     :   "9999px",
            delay       :   0,
        },
        "phone6" : {
            duration    :   792,
            leftIn      :   "900px",
            leftOut     :   "9999px",
            delay       :   setDelay(),
        },

    };

我正在使用上述对象尝试对幻灯片中的各个元素进行动画处理，该幻灯片已通过jquery cycle插件进行了动画处理.我正在通过以下方式使用代码

I am using the above object to try an animate individual elements within a slide, that is already animated via the jquery cycle plugin. I am using the code in the following way,

$('#slideshow').cycle({
    fx: 'scrollHorz',
    before  :   triggerParralex,
    after   :   removeParralex,
    easing  :   'easeOutCubic',
    speed   :   2000
});

因此，以上代码将启动循环插件.然后，我使用before和after回调来运行另外两个函数，这些函数看起来像这样，

so the code above initiates the cycle plugin. And then I am using the before and after callbacks to run 2 more functions, these functions look like this,

function bgChange(curr, next, opts) {
    var background = $(".current").attr('data-background');
    $.backstretch(background, {target: "#backstrectch", centeredY: true, speed: 800});
}

function triggerParralex(curr, next, opts) {
    //move any phones that are in the viewport
    for (var key in telephones) {
        var obj = telephones[key];
        for (var prop in obj) {
            if($(".current ." + key).length) { //does .custom .phone1/2/3/4/5/6 exist if it does we can carry on
                setTimeout(function() {
                    $(".current ." + key).animate({
                        "left"      :   obj["leftOut"],
                        "opacity"   :   0
                    }, obj["duration"]);
                }, obj["delay"]);
            }
        }
    }

    //change the background
    bgChange();

    //remove the current class from the DIV
    $(this).parent().find('section.current').removeClass('current');

}

function removeParralex(curr, next, opts) {

    //give the slide a current class so that we can identify it.
    $(this).addClass('current');

    //animate in any phones that belong to the current slide
    for (var key in telephones) {
        var obj = telephones[key];
        for (var prop in obj) {
            console.log(obj["leftIn"])
            if($(".current ." + key).length) { //does .custom .phone1/2/3/4/5/6 exist if it does we can carry on
                setTimeout(function() {
                    $(".current .phone1").animate({
                        "left"      :   obj["leftIn"],
                        "opacity"   :   1
                    }, obj["duration"]);
                }, obj["delay"]);
            }
        }
    }

}

我的问题如下，

我正在尝试对我的section元素中的图像进行动画处理，这些section元素已经通过cycle插件滑动了，这让我感觉好像是在稍后阶段停止对我的图像进行动画处理吗?

I am trying animate the images that are in my section elements, the section elements are what are already sliding via the cycle plugin, and this to me feels like it is stopping my images being animated at later stage?

第二个问题似乎是，虽然我的脚本会很高兴地找到$(".current .phone1")，但似乎只是从对象中添加了phone6的属性，但我做了一个

The second problem seems to be that while my script will happily find $(".current .phone1") is only seems to add the properties of phone6 from the object, I have made a fiddle.

从小提琴中可以看到，带有#slideshow的部分正在循环显示，但是其中的图像没有动画...为什么?

As you can see from the fiddle the sections with #slideshow are cycling however the images within them are not being animated...why?

推荐答案

正如Felix Kling在评论中说的那样，您遇到了一个经典的内部封闭循环"问题.

As Felix Kling said in comment, you have a classical "closure inside loop" problem.

这是一个(经典)解决方案:

Here's a (classical) solution :

for (var key in telephones) {
    if($(".current ." + key).length) { //does .custom .phone1/2/3/4/5/6 exist if it does we can carry on
        var obj = telephones[key];
        (function(obj){
            setTimeout(function() {
                $(".current .phone1").animate({
                    "left"      :   obj["leftIn"],
                    "opacity"   :   1
                }, obj["duration"]);
            }, obj["delay"]);
        })(obj);
    }
}

这个想法是将obj嵌入另一个闭包中，将其与循环隔离，从而防止更改.

The idea is to embbed obj in another closure, isolating it from the loop, and thus preventing its change.

这篇关于遍历一个javascript对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！