javascript - 实现一个迭代数组的运行器

Question

粗体表示更新。

我有一个数组，steps，其内容是具有与其关联的操作和元素的对象。就像这样:

steps = [{action: 'click', element: <jQuery element>}, 
         {action: 'click', element: <jQuery element>}, ., ., N]

我想实现一个运行程序，其工作是运行数组中的每个元素并对元素执行特定操作。每个步骤必须连续执行。例如，如果您有:

 steps = [{action: 'click', element: <jQuery element representing a button>},
          {action: 'click', element: <jQuery element representing an anchor tag>}]

运行，run(steps, timeout)，将运行每个步骤。步骤[0].action 将在步骤[0].element 上执行。由于步骤[0]可以创建要在步骤[1]中进行交互的dom元素(通过AJAX)，因此运行者需要等待特定的时间(因此，超时)，轮询 dom 是否存在 step[1].element。

这是我迄今为止所掌握的粗略内容:

var run = function() { 
    $.each(steps, function(i, v) { 
        var interval = 25, 
            start = 0, 
            timeout = 3000; 
        var i = setInterval(function(timeout) { 
            start = start + interval; 
            console.log(start); 
            if ($(v).is(':visible')) { 
                v.click(); 
                console.log('clicked', v); 
                clearInterval(i);
            }   
        }, interval);
    }); 
};

请注意，在上面的示例中，steps 只是一个 jquery 对象数组。目前还不是所需的格式:

steps = [{action: 'click', element: <jQuery element>}, 
         {action: 'click', element: <jQuery element>}, ., ., N]

我需要遵循的“模式”是什么？我需要使用延迟对象来处理这个问题吗？是用setTimeout、setInterval来实现的吗？谢谢!

最终实现

var run = function(steps, interval, timeout) {
    var timer,
        time = 0,
        i = 0;

    runSingle(steps[0]);

    function abort() {
        console.log("Run aborted");
    }

    function runSingle(step) {
        timer = setInterval(function() {
            time += interval;
            if ($(step.element).is(':visible') === true) {
                clearInterval(timer);
                time = 0;
                $(step.element).trigger(step.action);
                (i < (steps.length - 1)) && runSingle(steps[++i]);
            } else if (time >= timeout) {
                clearInterval(timer);
                abort();
            }
        }, interval);
        console.log("Performed: ", step.action, "on", step.element) 
        if (i === (steps.length - 1)) console.log("Run successful");
    }
}

Answer 1

这是一些东西。我还没有彻底测试过:

var run = function(steps, interval)
{
    var timer,
        time = 0, timeout = 10000,
        ciel = steps.length - 1,
        i = 0;

    run_single(steps[0]);

    function run_single(item)
    {
        timer = setInterval(function()
        {
            var $el = $(item.selector);

            time += interval;

            if ( $el.length )
            {
                clearInterval( timer );
                time = 0;

                $el.trigger( item.action );

                i < ciel && run_single( step[ ++i ] );
            }
            else
            {
                if ( time >= timeout ) clearInterval( timer );
            }

        }, interval);
    }
};

var steps = [
    {action: 'click', selector: '#first'},
    {action: 'hover', selector: '#second'},
    {action: 'change', selector: '#third'}
    // and so on...
];

run(steps, 100);

在此处查看实际操作:http://jsfiddle.net/myaeh/