数组中每个索引的函数调用之间的javascript延迟[关闭]

2024-04-17

目标：

对数组中的每个元素执行逻辑。
Wait X下次执行之间的毫秒数。
mouseover(#slider)暂停延迟 - 如果延迟 = 1000ms，并且已经过去了 300ms，mouseout(#slider)将触发恢复对剩余 700ms 延迟进行倒计时。
在执行完最后一个元素后，循环回来再次执行 - 永远。

这是一个直观的解释：

var = s Array(1,2,3)

var x = s[1];   //get first element   
console.log(x); //do something to it
wait();         //START wait timer 1000ms

//------------> timer : 300ms
//------------> user  : mouseover (#slider) : pause timer
//------------> user  : waited 5000ms
//------------> user  : mouseout  (#slider) : resume timer
//------------> timer : 300ms --> still 700ms to go!
//------------> timer : 500ms
//------------> user  : mouseover (#slider) : pause timer
//------------> user  : waited 10000ms
//------------> user  : mouseout  (#slider) : resume timer
//------------> timer : 500ms --> still 500ms to go!

var x = s[2];   //get second element   
console.log(x); //do something to it
wait();         //START wait timer 1000ms

//------------> timer : 200ms
//------------> user  : mouseover (#slider) : pause timer
//------------> user  : onclick   (.slideButton1) : change index of array and clear timer
//------------> user  : waited 6000ms
//------------> user  : mouseout  (#slider) : resume timer
//------------> timer : 0ms --> still 1000ms to go!

var x = s[1];   //get first element   ( index was changed by clicking button )
console.log(x); //do something to it
wait();         //START wait timer 1000ms

// ... s[2] ... s[3] ...
//theres nothing else in the array, lets start back from s[1] again!

解决方案：

jQuery:

http://jsfiddle.net/zGd8a/8/ http://jsfiddle.net/zGd8a/8/

该解决方案来自相关post https://stackoverflow.com/questions/13002674/jquery-each-index-when-passed-self。这个插件的官方源码可以找到here http://roxon.in/scripts/fademe_jquery_plugin/.

原生JS：

http://jsfiddle.net/SyTFZ/4/ http://jsfiddle.net/SyTFZ/4/

This Answer https://stackoverflow.com/questions/12926531/javascript-recursive-loop-through-array-with-delay-between-elements#12926811 by 阿迪特·M·沙阿 https://stackoverflow.com/users/783743/aadit-m-shah真的很有帮助。他还详细介绍了德尔塔正时以及它如何在类似情况下发挥作用。

新目标：

抽象这些方法中的任何一个以允许用于其他事情。

好的，现在您已经完全简化了问题，这是一个通用数组迭代器函数，它在数组的每个元素的迭代之间设置延迟，并且永远循环，直到回调函数返回false:

function iterateArrayWithDelay(arr, delay, fn) {
    var index = 0;

    function next() {
        // protect against empty array
        if (!arr.length) {
            return;
        }

        // see if we need to wrap the index
        if (index >= arr.length) {
            index = 0;
        }

        // call the callback
        if (fn(arr[index], arr, index) === false) {
            // stop iterating
            return;
        }

        ++index;

        // schedule next iteration
        setTimeout(next, delay);
    }
    // start the iteration
    next();
}

并且，对于您的示例，您将像这样使用它：

iterateArrayWithDelay(s, 1000, myFunction);

你定义的地方myFunction是处理每个元素的回调函数。回调传递三个项目：

myFunction(item, array, i){
    // your code here to process item
}

.delay()仅适用于使用动画队列的 jQuery 方法。在您的代码示例中，.delay('1000')没有做任何事情，因为在同一个对象上没有 jQuery 动画方法。

至于内存泄漏，很难跟踪您正在执行的操作的整体上下文，因为我们看不到由表示的对象的生命周期this及其属性。这个序列看起来很奇怪：

var x = t.s[i];
...
delete t.s[i];
t.s.push(x);

特别是，我不明白如何delete语句实际上正在做任何事情，因为您仍然有对内容的引用x所以什么都不会被垃圾收集。更远，delete在 javascript 中，用于删除对象属性，而不是用于释放对象或删除数组元素。要释放对象，您必须删除对该对象的所有引用（将它们设置为其他值，以便它们不再包含引用或让它们超出范围）。因此，由于您永远无法摆脱对其中任何内容的引用t.s[i]，没有任何东西被释放。

您的使用setTimeout()不会引起递归。你打电话时setTimeout()，它设置一个计时器并将函数引用放入与该计时器关联的数据结构中。然后，调用函数继续运行并完成执行。因此，它在 setTimeout() 触发并再次调用之前执行完毕。所以，这实际上不是递归。它是一堆连续的函数调用，以时间间隔分隔，并且一个在下一个可以运行之前完成（因为 javascript 是单线程的，并且计时器是为将来设置的）。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery