Javascript 如何在调用下一个回调函数之前添加延迟？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3301398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add delay before calling next call back function?
提问by KoolKabin
I am trying to make a javascript banner. I have 3 images inside a div with ids #img1, #img2 n #img3.
我正在尝试制作一个 javascript 横幅。我在一个 div 中有 3 个图像，ID 为 #img1、#img2 n #img3。
<script src="scripts/jquery-latest.min.js" type="text/javascript"></script>
<script>
var AnimState = true;
var AnimTime = 2000;
var AnimDelay = 3000;
$(document).ready( function()
{
$('#image img').hide();
$('#img3').show();
Show1();
});
function Show1()
{
if( AnimState === true )
{
$("#img3").fadeOut(AnimTime);
$("#img1").fadeIn(AnimTime, Show2);
}
}
function Show2()
{
if( AnimState === true )
{
$("#img1").fadeOut(AnimTime);
$("#img2").fadeIn(AnimTime, Show3);
}
}
function Show3()
{
if( AnimState === true )
{
$("#img2").fadeOut(AnimTime);
$("#img3").fadeIn(AnimTime, Show1);
}
}
$('#btn1').click( function()
{
AnimState = !AnimState;
Show1();
});
</script>
It works fine. The only thing is that now i want to add the delay after fadein effect but trying diff stuffs i failed. So what can be done to add delay for few mins and then only call next function ie. I want to add delay after $("#img3").fadeIn(AnimTime)and after delay only call Show1()function
它工作正常。唯一的事情是，现在我想在淡入淡出效果后添加延迟，但尝试不同的东西我失败了。那么可以做些什么来增加几分钟的延迟，然后只调用下一个函数，即。我想在延迟之后$("#img3").fadeIn(AnimTime)和之后添加延迟只调用Show1()函数
回答by Squirkle
Okay, try this. After your animations:
好的，试试这个。在你的动画之后：
$("#img1").fadeOut(AnimTime);
$("#img2").fadeIn(AnimTime);
setTimeout(Show3, 30000); //delays next call for 30 seconds
回答by Henrik Joreteg
What I do for this is here in this gist: http://gist.github.com/467030
我为此所做的就是在这个要点中：http: //gist.github.com/467030
Essentially it lest you create a completely unrelated array of functions, animations or not... and then execute them one by one at the given interval.
从本质上讲，它是为了避免您创建一个完全不相关的函数、动画或动画数组……然后以给定的时间间隔一个一个地执行它们。
// create an array of functions to be executed
// everything in each step would be executed simultaneously
var myFuncs = [
// Step #1
function () {
$("#img1").fadeOut(200);
doSomething();
doSomethingElseAtTheSameTime();
},
// Step #2
function () {
doOtherStuff();
},
// Step #3
function () {
woohoo();
}
];
// then, the function in that gist:
// Simple function queue runner. Just pass me an array of functions and I'll
// execute them one by one at the given interval.
var run_queue = function (funcs, step, speed) {
step = step || 0;
speed = speed || 500;
funcs = funcs || [];
if (step < funcs.length) {
// execute function
funcs[step]();
// loop it
setTimeout(function () {
run_queue(funcs, step + 1);
}, speed);
}
return;
};
// run them.
run_queue(myFuncs, 0, 1000);
Obviously, this is simpler than you'd want. But the basic idea works really well. Even using jQuery queue() only works for performing subsequent animations on the same items. These can be completely unrelated function executions.
显然，这比您想要的要简单。但是基本的想法非常有效。即使使用 jQuery queue() 也仅适用于对相同项目执行后续动画。这些可以是完全不相关的函数执行。
回答by chahedous
回答by Squirkle
use $("#img3").fadeIn(AnimTime).delay('1000')
用 $("#img3").fadeIn(AnimTime).delay('1000')
1000is in milliseconds.
1000以毫秒为单位。
回答by TGarrett
setTimeout(MyFunction(), 3000);
I would do this to simply pause 3 seconds before executing the MyFunction. Hope this helps...
我这样做是为了在执行 MyFunction 之前简单地暂停 3 秒。希望这可以帮助...
