Javascript动画在放大和缩小时不能正常工作

我在javascript中创建了一个动画，使用setTimeout通过计时来改变各种元素的css属性，但我只是注意到，当放大和缩小时，超时函数继续，但动画停止/变慢导致元素堆叠在一起，然后它会在你停止缩放后匆忙完成所有动画(就像当标签是非活动的时候，动画似乎停止和恢复，当你回到TAB的动画是以前运行)，虽然它不是那么多的问题，因为它回到它的正常流程，当你停止缩放，它只是令人恼火。

这正常吗?还是我的代码中有什么需要修改的地方?

    var scaleRegEx = new RegExp(/scale'(['s'S]+?')/i);
    function moveThis(el, xpos, ypos){
        el.style.left = xpos + 'px';
        el.style.top = ypos + 'px';
    }
    function scaleThis(el, xscale, yscale){
        if (scaleRegEx.test(el.style.transform) === false){
            el.style.transform += " scale(" + xscale + "," + yscale + ")";
        } else {
            el.style.transform = el.style.transform.replace(
                scaleRegEx, "scale(" + xscale + "," + yscale + ")"
            );
        }
    }
    function setClip(el, x, y, width, height){
        el.style.clip = "rect(" + y + "px," + (x+width) + "px," + (y+height) + "px," + x + "px)";
    }
    var images = new Array(
        "assets/bg.png",
        "assets/box-open.png",
        "assets/box-closed.png",
        "assets/link.png",
        "assets/cursor.png",
        "assets/product-big.png",
        "assets/text1.png",
        "assets/text2.png",
        "assets/text3.png",
        "assets/logo.png",
        "assets/box-openback.png"
    );
    var loadedImage = 0;
    for (var i = 0; i <= images.length - 1; i++) {
        imageObj = new Image();
        imageObj.src = images[i];
        imageObj.addEventListener("load", iLoad, false)
    }
    function iLoad() {
        loadedImage++;
        if (images.length == loadedImage) {
            bg.style.background         = "url('" + images[0]  + "') no-repeat";
            boxOpen.style.background    = "url('" + images[1]  + "') no-repeat";
            boxClosed.style.background  = "url('" + images[2]  + "') no-repeat";
            link.style.background       = "url('" + images[3]  + "') no-repeat";
            cursorIcon.style.background = "url('" + images[4]  + "') no-repeat";
            productBig.style.background = "url('" + images[5]  + "') no-repeat";
            text1.style.background      = "url('" + images[6]  + "') no-repeat";
            text2.style.background      = "url('" + images[7]  + "') no-repeat";
            text3.style.background      = "url('" + images[8]  + "') no-repeat";
            logo.style.background       = "url('" + images[9]  + "') no-repeat";
            boxBack.style.background    = "url('" + images[10] + "') no-repeat";
            setClip(productBig, 0, 0, 615, 631);
            setClip(text2, 0, 0, 768, 90);
            setTimeout(startScene1, 2000);
        }
    }
    // zoom out the product
    function startScene1(){
        text1.style.opacity = 0;
        //fade out big product
        scaleThis(productBig, 0.13, 0.13);
        moveThis(productBig, 235, -45);
        scaleThis(boxOpen, 1.0, 1.0);
        moveThis(boxOpen, 0, 0);
        scaleThis(boxBack, 1.0, 1.0);
        moveThis(boxBack, 0, 0);
        // put the product inside box
        setTimeout(function(){
            productBig.className += " productTransition";
            productBig.style.top = "30px";
            setClip(productBig, 0, 0, 615, 0);
        }, 3000);
        // show text 2
        setTimeout(function(){
            text2.style.opacity = 1;
        }, 1000);
        // dispose text2
        setTimeout(function(){
            text2.style.left = "-728px";
        }, 4000);
    }