javascript - 使用带有延迟和操作的 Javascript 创建数组和循环

Question

我需要帮助创建数组和循环。我不确定如何包含鼠标悬停和单击所需的两个操作，以循环浏览所有 6 个按钮。这是带有延迟和两个按钮的代码示例。这些按钮还有其他区域，它们可以对鼠标悬停并单击进行操作，因此我将两者都包括在内，以便过渡看起来更好。

我正在利用延迟慢慢地从一个按钮过渡到下一个按钮，但很难让它循环。

var delay1=5800//2 seconds
var delay2=6000//6 seconds

setTimeout(function(){
  $("#mc_button_hitID_2").mouseover();
}, delay1)

setTimeout(function(){
  $("#mc_button_hitID_2").click();
  //your code to be executed after 1 seconds
}, delay2)

Answer 1

我不完全确定为什么你想通过 JavaScript 悬停并单击按钮。如果您想创建一个良好的过渡，我建议您看看 TweenMax

否则，您的查询的解决方案可能是这样的。

fiddle

//jquery ready function
$(function(){
    var btns = $('button'); //selector for all your buttons
    var count = 0; //var to keep track of progress
    var loop = setInterval(function(){
        if(count === btns.length){
            clearInterval(loop);
        }else{
            //do your stuff.
            var delay1=5800//2 seconds
            var delay2=6000//6 seconds

            setTimeout(function(){
              $(btns[count]).mouseover();
            }, delay1)

            setTimeout(function(){
              $(btns[count]).click();
              //your code to be executed after 1 seconds
            }, delay2)
        }
        count++;
    },6000) //you probably need some delay between each button

    ///just some testing code to know that we are really interacting with the buttons
    $('button').each(function(){
        $(this).click(function(){
            console.log('clicked ' + $(this).html());
        })
        $(this).mouseover(function(){
            console.log('mouseover ' + $(this).html());
        })
    })
})