JS删除并添加类计时功能

时间:2014-03-26 13:12:41

标签: javascript jquery html css

下面是一些我不知道如何修改以实现我想要的js。而不是onclick我需要在延迟40秒后激活js。

// retrieve the element
element = document.getElementById("ani");

// reset the transition by...
element.addEventListener("click", function(e){
e.preventDefault;

// -> removing the class
element.classList.remove("delay-1");

// -> triggering reflow /* The actual magic */
// without this it wouldn't work. Try uncommenting the line and the transition won't be         retriggered.
element.offsetWidth = element.offsetWidth;

// -> and re-adding the class
element.classList.add("delay-1");
}, false);

3 个答案:

答案 0 :(得分:8)

使用setTimeout在指定的毫秒数后调用方法/任务。

setTimeout(function() {
    //your code/function here
}, (40*1000)); //40 seconds

答案 1 :(得分:0)

使用函数setTimeout。

例如,如在例如How do I delay a function call for 5 seconds?

在你的情况下:

// retrieve the element
element = document.getElementById("ani");

// reset the transition by...
element.addEventListener("click", function(e){
  e.preventDefault;

  //introducing a delay of 40 seconds.
  setTimeout(function() {
    // -> removing the class
    element.classList.remove("delay-1");

    // -> triggering reflow /* The actual magic */
    // without this it wouldn't work. Try uncommenting the line and the transition won't be         retriggered.
    element.offsetWidth = element.offsetWidth;

    // -> and re-adding the class
    element.classList.add("delay-1");
  }, 40 * 1000);
}, false);

答案 2 :(得分:0)

使用setTimeout函数:

setTimeout(function() {
    // retrieve the element
    element = document.getElementById("ani");

    // reset the transition by...
    element.addEventListener("click", function(e){
    e.preventDefault;

    // -> removing the class
    element.classList.remove("delay-1");

    // -> triggering reflow /* The actual magic */
    // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
    element.offsetWidth = element.offsetWidth;

    // -> and re-adding the class
    element.classList.add("delay-1");
    }, false);
}, 40000);