Javascript 香草JS：延迟单击事件以添加动画

请不要用jQuery

我不想为此使用jQuery，因为它是一个很大的库，我只需要做一件事：

我想给点击事件添加一个短暂的延迟，这样我就可以使用CSS淡出页面中的元素

我可以发布到目前为止我尝试过的所有代码，但你会觉得无聊。这是我认为最接近的一个：

document.getElementsByTagName('a').onclick = function (e) {

// Delay setting the location for one second
setTimeout(function() {this.href}, 90000);

var animOut = document.getElementByClassName('animateOut');
   animOut.className += 'out';
};

我已经排除了在卸载之前使用

的可能性，因此劫持click事件似乎是最好的方法

再一次，我知道这在jQuery中是一个小问题，但如果可能的话，我想避免它

非常感谢你的回答

本


更新
多亏了留言者guest271314和Alpha，我已经确定了这种方法，但仍然没有完成这个谜题

window.onload = function(){

var links = document.getElementsByTagName('a');
for( var i=0,il = links.length; i< il; i ++ ){
 links[i].onclick = clickHandler;
}

function clickHandler(event) {

event.preventDefault();

// Delay setting the location for one second
setTimeout(function() {

  location.href = this.href;
}, 90000);

// add `s` to `Element`
var animOut = document.getElementsByClassName("animateOut");

// iterate `animOut` elements
for (var i = 0; i < animOut.length; i++) {
   // add `out` `className` to `animOut` element at index `i`
   animOut[i].classList.add("out");
};
};
};

window.onload=function（）{
var links=document.getElementsByTagName（'a'）；
对于（var i=0，il=links.length；i

通过阅读其他帖子（我将在一分钟内链接到它们），我学到了迭代
a
标签

不幸的是，
setTimeout
函数似乎不起作用。我需要改进这个函数中的内容，但不知道用什么方法

我们非常欢迎进一步的援助

谢谢

Ben
您可以尝试以下方法：

document.getElementsByTagName('a').onclick = function (event) {
    event.preventDefault();
    document.getElementByClassName('animateOut').className += ' out';
    setTimeout(function() {
        location.href = this.href;
    }, 1000);
};

您可以尝试以下方法：

document.getElementsByTagName('a').onclick = function (event) {
    event.preventDefault();
    document.getElementByClassName('animateOut').className += ' out';
    setTimeout(function() {
        location.href = this.href;
    }, 1000);
};

应该有一个
“s”
。要将
className
添加到所有
animateOut
元素中，可以使用
for
循环；如果预期结果是导航到单击的
a
元素的
href
，则将
this.href
更改为
window.location.href=e.target.href
；否则保留为
this.href
是要求在
设置超时内刷新当前
窗口.location.href
：
this.href

document.getElementsByTagName("a").onclick = function (e) {

// Delay setting the location for one second
setTimeout(function() {window.location.href = this.href}, 90000);

// add `s` to `Element`
var animOut = document.getElementsByClassName("animateOut");
// iterate `animOut` elements
for (var i = 0; i < animOut.length; i++) {
   // add `out` `className` to `animOut` element at index `i`
   animOut[i].classList.add("out");
};

document.getElementsByTagName（“a”）.onclick=function（e）{
//延迟设置位置一秒钟
setTimeout（function（）{window.location.href=this.href}，90000）；
//将`s`添加到`Element`
var animoout=document.getElementsByClassName（“animateOut”）；
//迭代'animOut'元素
对于（变量i=0；i
应该有一个
“s”
at.要将
className
添加到所有
animateOut
元素中，可以为
循环使用
；将
this.href
更改为
window.location.href=e.target.href
如果预期结果是导航到单击的
a
元素的
href
；否则保留为
此项要求是efresh当前
窗口.location.href
：
this.href
在
setTimeout

document.getElementsByTagName("a").onclick = function (e) {

// Delay setting the location for one second
setTimeout(function() {window.location.href = this.href}, 90000);

// add `s` to `Element`
var animOut = document.getElementsByClassName("animateOut");
// iterate `animOut` elements
for (var i = 0; i < animOut.length; i++) {
   // add `out` `className` to `animOut` element at index `i`
   animOut[i].classList.add("out");
};

document.getElementsByTagName（“a”）.onclick=function（e）{
//延迟设置位置一秒钟
setTimeout（function（）{window.location.href=this.href}，90000）；
//将`s`添加到`Element`
var animoout=document.getElementsByClassName（“animateOut”）；
//迭代'animOut'元素
对于（变量i=0；i
我真的不能因此而受到赞扬，下面的两位用户（guest271314和Alpha）帮助我实现了这一目标，他们应该得到很多认可。完整的代码，经过一些改进，是：

window.onload = function(){

var links = document.getElementsByTagName('a');

for( var i=0,il = links.length; i< il; i ++ ){
links[i].onclick = clickHandler;
}

function clickHandler(event) {

event.preventDefault();

var travelTo = this.getAttribute("href");

// add `s` to `Element`
var animOut = document.getElementsByClassName("animateOut");

// iterate `animOut` elements
for (var i = 0; i < animOut.length; i++) {
   // add `out` `className` to `animOut` element at index `i`
   animOut[i].classList.add("out");
};

// Delay page out until the animation finishes
setTimeout(function() {
  window.location.href = travelTo;
}, 1000);
};
};

window.onload=function（）{
var links=document.getElementsByTagName（'a'）；
对于（var i=0，il=links.length；i
我真的不能因此而受到赞扬，下面的两位用户（guest271314和Alpha）帮助我实现了这一目标，他们应该得到很多认可。完整的代码，经过一些改进，是：

window.onload = function(){

var links = document.getElementsByTagName('a');

for( var i=0,il = links.length; i< il; i ++ ){
links[i].onclick = clickHandler;
}

function clickHandler(event) {

event.preventDefault();

var travelTo = this.getAttribute("href");

// add `s` to `Element`
var animOut = document.getElementsByClassName("animateOut");

// iterate `animOut` elements
for (var i = 0; i < animOut.length; i++) {
   // add `out` `className` to `animOut` element at index `i`
   animOut[i].classList.add("out");
};

// Delay page out until the animation finishes
setTimeout(function() {
  window.location.href = travelTo;
}, 1000);
};
};

window.onload=function（）{
var links=document.getElementsByTagName（'a'）；
对于（var i=0，il=links.length；i
谢谢您的评论，这是我的一大难题。如果您有什么可以帮助我完善
setTimeout
函数的，我将不胜感激。@endymion1818“setTimeout
函数似乎不起作用。”
setTimeout
的预期结果是什么？
this.href
代表什么？文档的当前URL，或单击的
a
元素的
href
属性？Hi@guest271314，预期结果是针对
settime的