Question

我有2个函数abc（）和def（）。两者都有settimeout功能。它们是从父xyz（）函数调用的。最初应该在调用abc动画def（）函数之后调用abc（）。问题：两个函数都是一个接一个地调用，但它们之间没有延迟.settimeout同时工作。请帮忙。提前谢谢。

function abc() {
    y = y + 5;
    if (y < 150)
        $('#avatar').css('bottom', y + 'px');
        interval12 = setTimeout(up, 150);
    } else if (y == 150) {
        clearTimeout(interval12);
        console.log("hello1");
    }
}

function def() {
    x = x + 5;
    if (x < newleftmove) {
        $('#avatar').css('left', x + 'px');

        interval1 = setTimeout(movetopLeft, 150, function () {
            afterleft
        });
    } else if (x == newleftmove) {
        clearTimeout(interval1);
        console.log("hello");
    }
}

function xyz() {
    abc();
    def();
}

Answer 1

的jQuery

我建议查看jQuery或类似内容，在abc()中执行动画，并使用回调来触发def()。即使你需要暂停，你也可以用jQuery做到这一点。只是动画，没有延迟，并使用delay()方法在下一个动画步骤之前延迟。

someEl.animate( { top: 100 }, 10 ).delay( 150 ).animate( { top: 200 }, 10, def );

CSS转换

另一种方法是为动画使用CSS过渡并在def()事件上触发transitionend ......

示例css：

.before_animation{
  position: absolute;
  top: 0px;
  transition: top 2s;
}

.animated{
  top: 100px;
}

要触发动画，请将.animated类添加到已有.before_animation类的元素中。

然后你需要听取结束事件：

el.addEventListener( "transitionend" def );

或使用jQuery：

$(el).on( 'transitionend', def );

最后的想法

正如其他人在评论中指出的那样。这是一个已解决的问题。使用可用的工具而不是自己的黑客。无论您是希望定位旧版浏览器还是现代浏览器，或者两者兼而有之，都有比setTimeout()更好的方式。

Answer 2

我为此制作了原型，只需在您的文件中插入此代码：

//@Author Karl-André Gagnon
if(!Function.prototype.delay){
    Function.prototype.delay = function(time, target){
        var fn = this;
        var args = Array.prototype.slice.call(arguments, 2);
        setTimeout(function(){
            fn.apply(target, args);
        }, time)
    }
}

此函数需要2个参数：时间和this引用。

检查示例：http://jsfiddle.net/UL6RM/

在你的代码中使用它：

abc();
def.delay(150, null); //150 = time; null = this (unused)

Answer 3

就我而言，你应该在每150毫秒后递归调用abc和def。你必须等到第一个动画完成后再调用下一步。你可以试试这个：

function abc() {
    y = y + 5;
    if (y < 150) {
        $('#avatar').css('bottom', y + 'px');
        interval12 = setTimeout(up, 150);
    } else if (y == 150) {
        clearTimeout(interval12);
        if (typeof (arguments.callee.nextStep) == "function") {
            arguments.callee.nextStep.call(this);
        }
        console.log("hello1");
    }
}


function def() {
    x = x + 5;
    if (x < newleftmove) {
        $('#avatar').css('left', x + 'px');

        interval1 = setTimeout(movetopLeft, 150, function () {
            afterleft
        });
    } else if (x == newleftmove) {
        clearTimeout(interval1);
        if (typeof (arguments.callee.nextStep) == "function") {
            arguments.callee.nextStep.call(this);
        }
        console.log("hello");
    }
}

//It could be you nex step after def is called
function geh() {
    //do whatever you want
}
function xyz() {
    abc.nextStep = def;
    def.nextStep = geh;
    abc();
}

在每个设置超时的2个功能之间需要延迟

3 个答案:

的jQuery

CSS转换

最后的想法