javascript 延迟链接点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8775541/
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 a link click
提问by henryaaron
Here's the fiddle I'm working with: http://jsfiddle.net/Scd9b/
这是我正在使用的小提琴：http: //jsfiddle.net/Scd9b/
How can I delay the href function after the click?
点击后如何延迟href功能？
For example a user clicks on the link, the message slides down One moment...and after 2 seconds the user continues to the page its linked to.
例如，用户单击链接，消息向下滑动片刻......2 秒后，用户继续到其链接的页面。
Sorry everybody forgot to mention there are some anchors that are not linked.
对不起大家忘了说有一些主播没有链接。
回答by techfoobar
Check this fiddle: http://jsfiddle.net/C87wM/1/
检查这个小提琴：http: //jsfiddle.net/C87wM/1/
Modify your toggle like this:
像这样修改你的切换：
$("a.question[href]").click(function(){
var self = $(this);
self.toggleClass("active").next().slideToggle(2000, function() {
window.location.href = self.attr('href'); // go to href after the slide animation completes
});
return false; // And also make sure you return false from your click handler.
});
回答by ctcherry
You can simulate navigating to a page by settings window.location. So we will block the normal function of the link with preventDefaultand then in a setTimeout, we will set the correct window.location:
您可以通过设置 window.location 模拟导航到页面。因此，我们将使用 阻止链接的正常功能，preventDefault然后在 a 中setTimeout，我们将设置正确的 window.location：
https://codepen.io/anon/pen/PePLbv
https://codepen.io/anon/pen/PePLbv
$("a.question[href]").click(function(e){
e.preventDefault();
if (this.href) {
var target = this.href;
setTimeout(function(){
window.location = target;
}, 2000);
}
});
回答by epascarello
Cancel the click and use setTimeout to change the location.
取消单击并使用 setTimeout 更改位置。
$(document).ready(function(){
$("span.answer").hide();
$("a.question").click(function(e){
$(this).toggleClass("active").next().slideToggle("slow");
e.preventDefault();
var loc = this.href;
if(loc){
window.setTimeout( function(){ window.location.href=loc; }, 2000 );
}
});
});
回答by Patrick Evans
$(document).ready(function(){
$("span.answer").hide();
$("a.question").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("slow");
var Link = $(this).attr("href");
setTimeout(function()
{
window.location.href = Link;
},2000);
});
});
回答by davidethell
How about e.preventDefault in your click handler. Then do a setTimeout that takes you to your destination?
单击处理程序中的 e.preventDefault 怎么样。然后做一个带你到目的地的setTimeout？
$("a.question").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("slow");
setTimeout('window.location.href=' + $(this).attr(href), 2000);
});
回答by Purag
Prevent the default action of the link, first of all. Then add a timeout of 2 seconds, after which the page is redirected to the urlfound in the hrefattribute of the link.
首先，防止链接的默认操作。然后添加一个 2 秒的超时，之后页面被重定向到在链接url的href属性中找到。
$("a.question").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("slow");
setTimeout(function(){
location.href = $(this).prop("href");
}, 2000);
});
例子。
回答by gilly3
This should do it:
这应该这样做：
$("a[href]").click(function () {
var url = this.href;
setTimeout(function () {
location.href = url;
}, 2000);
return false;
});
回答by lasrtb
Setting window location didn't sound like a good idea to me, So here's what I did
设置窗口位置对我来说听起来不是一个好主意，所以这就是我所做的
On click it checks whether the user clicked the link if yes it waits 2 seconds then triggers the click again and since it's not user-triggered it doesn't wait this time
单击时，它会检查用户是否单击了链接，如果是，则等待 2 秒，然后再次触发单击，因为它不是用户触发的，所以这次不会等待
document.getElementById("question").addEventListener("click", function(e) {
//if user clicked prevent default and trigger after 2 seconds
if(e.isTrusted) {
e.preventDefault();
//after 2 seconds click it and it'll not wait since it's not user triggered
setTimeout(function() {
e.target.click();
}, 2000);
}
});<a href="http://www.bing.com" id="question">Bing</a>