javascript - 普通JS : delay click event to add animation

Question

请不要使用 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';
};

我已经排除了使用onbeforeunload，因此劫持点击事件似乎是最好的方法。

再一次，我知道这在 jQuery 中是轻而易举的事，但如果可能的话我想避免它。

非常感谢您的回答。

本

<小时/>

更新

感谢评论者 guest271314 和 The 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");
};
};
};

必须迭代 a 标签是我从阅读其他帖子中学到的一个补充(我将在一分钟内链接到它们)。

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

非常欢迎您提供进一步的帮助。

谢谢

本

Answer 1

我不能真正为此归功于自己，下面的 2 位用户(guest271314 和 The 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);
};
};