Vanilla JS：延迟点击事件添加动画

问题描述 投票：0回答：4

请不要使用 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
功能似乎不起作用。我需要完善这个函数中的内容，但不知道以什么方式。

非常欢迎进一步的帮助。

谢谢

本

javascript animation
4个回答
3
投票

我不能真正为此归功于，下面的 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);
};
};
2
投票

你可以尝试这样的事情：

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

"s"
处应该有一个
document.getElementsByClassName。要将 
className
 添加到所有 
animateOut
 元素可以使用 
for
 循环；如果预期结果是导航到单击的 
this.href
 元素的 
window.location.href = e.target.href
，请将 
href
 更改为 
a
；否则保留为 
this.href
 要求刷新当前 
window.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");
};


    

      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


虽然晚了八 (08) 年，但您需要执行以下操作才能在纯 JavaScript 中的任何位置引入延迟。


这是语法：


setTimeout(() => { /*your fancy stuff here*/ }, DelayYouWantInMs);



例如，我想在页面上显示“正在加载...”2 秒，以便在单击按钮时绘制动态 HTML 表格，从而进一步从 api 检索数据。


以下是如何使用上述语法：


    setTimeout(() => {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(createTable)
            .catch(error => console.error(error));

    }, 2000);



还有一个完整的工作示例：


<!DOCTYPE html>
<html>
<body>
    <h2>Build table from API response</h2>
    <button id="foo">Lets do it !</button>
</body>
<script>
    const button = document.querySelector('#foo');
    button.addEventListener('click', fetchData, false);

    function fetchData() {
        button.textContent = 'Loading...Please wait...';
        button.disabled = true;
        
        setTimeout(() => {
            fetch('https://jsonplaceholder.typicode.com/users')
                .then(response => response.json())
                .then(createTable)
                .catch(error => console.error(error));

        }, 2000);
    }
    function getColumnHeadings(data) {
        return Object.keys(data[0]).map(key => {
            return `<td>${key}</td>`;
        }).join('');
    }
    function getRows(data) {
        return data.map(obj => {
            return `<tr>${getCells(obj)}</tr>`
        }).join('');
    }
    function getCells(obj) {
        return Object.values(obj).map(value => {
            return `<td>${value}</td>`;
        }).join('');
    }
    function createTable(data) {
        const headings = getColumnHeadings(data);
        const rows = getRows(data);
        const html = `<table><tbody><tr class="headings">${headings}</tr>${rows}</tbody></table>`
        document.body.insertAdjacentHTML('beforeend', html);
        button.remove();
    }
</script>
</html>


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.