Javascript 延迟（）或停止（）超时？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3329197/
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
delay() or timeout with stop()?
提问by matt
$('.file a').live('mouseenter', function() {
$('#download').stop(true, true).fadeIn('fast');
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
I want the mouseenterfunction to have a stop()and a delay of 1 second.
So, if I hover over #downloadthe fadeInshould start after a 1 second delay. If I mouse out meanwhile the fadeInshouldn't start. Get me?
我希望该mouseenter函数具有stop()1 秒的延迟。所以，如果我将鼠标悬停在#download该fadeIn应延迟1秒后启动。如果我同时将鼠标移开，则fadeIn不应启动。找我？
I don't really know how to do that, any ideas?
我真的不知道该怎么做，有什么想法吗？
回答by Nick Craver
You need to use setTimeout()in this case because of how .delay()works (and your inability to cancel it).
setTimeout()由于.delay()工作原理（以及您无法取消它），您需要在这种情况下使用。
$('.file a').live('mouseenter', function() {
$.data(this, 'timer', setTimeout(function() {
$('#download').stop(true, true).fadeIn('fast');
}, 1000));
}).live('mouseleave', function() {
clearTimeout($.data(this, 'timer'));
$('#download').stop(true, true).fadeOut('fast');
});
If you use .delay()it'll dequeue the next animation for the element, regardless of if you cleared that queue earlier. So you need a timeout that you cancancel, which the above does by manually calling setTimeout()and storing the result with $.data()so you can clear it later, via clearTimeout().
如果您使用.delay()它，它将使元素的下一个动画出列，无论您是否较早清除了该队列。所以你需要一个可以取消的超时，上面通过手动调用setTimeout()和存储结果来完成，$.data()以便你以后可以通过clearTimeout().
回答by user1417594
I was looking for the answer to a similar question, and I found that .animate() could also be used to handle this, and it obeys .stop()
我正在寻找类似问题的答案，我发现 .animate() 也可以用来处理这个问题，并且它遵守 .stop()
It would look something like this:
它看起来像这样：
$('.file a').live('mouseenter', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 1000); // one second delay
.animate({opacity:1}, 'fast', 'swing');
}).live('mouseleave', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 'slow', 'swing');
});
回答by sTodorov
Use a setTimeout function
使用 setTimeout 函数
$('.file a').live('mouseenter', function() {
setTimeout(function(){
$('#download').stop(true, true).fadeIn('fast');
}, 1000);
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
setTimeout will execute the code inside the function after the specified miliseconds (in this case 1000).
setTimeout 将在指定的毫秒（在本例中为 1000）后执行函数内的代码。
回答by M Rostami
you can use this on jquery without using delay event .
您可以在不使用延迟事件的情况下在 jquery 上使用它。
$('.file a').hover(function() {
time = setTimeout(function() {
$('#download').fadeIn();
},1000);
},function(){
clearTimeout(time);
});
1000 is your time that after it $('#download') will fade in .
1000 是您在 $('#download') 之后淡入的时间。
