这个函数的递归有什么问题？ （setTimeout问题）

Question

我正在编写一个选取框脚本，因为我不喜欢这样的事实：对于大多数选取框脚本，当选取框到达最后一个项目时（考虑使用 ul，所以最后一个项目是最后一个 li），它会等到该项目离开屏幕，并且然后重置 ul 的位置，并开始在 agian 上滚动。

我的方法是创建 ul 的克隆，将其附加在当前 ul 之后，并开始滚动，然后在原始 ul 完全隐藏后将其删除。

除了一件事之外，这几乎是完美的。当您调用该函数时，它会生成 setTimout 所需的时间。此 setTimout 用于创建新的 UL 并设置其移动。

这对于第一个循环来说效果很好，但随后就会出现故障。

这有点难以解释，但似乎第二次应该调用超时，而不是等待时间，而是立即调用自己。请参阅 http://webspirited.com/marquee.html 获取示例

工作示例。 JavaScript代码如下：

var count = 0;
$('document').ready(function () {
    //generate some random rows
    for (var i = 0; i <= 20; i++)
    $('.ulscroll').append('<li>Content ' + i + '</li>');
    //add one row so we can see its the last
    $('.ulscroll').append('<li>Last Item</li>');

    //set the ul's width
    var width = 0;
    $('.ulscroll').children('li').each(function () {
        width += $(this).outerWidth();
    });
    log('ul width: ' + width);
    $('.ulscroll').width(width);

    //activate the marquee              
    marquee('.ulscroll', 1, false);
});

function marquee(id, speed, sub) {
    //next two lines debugging purposes only
    count += 1;
    log('Marquee ran ' + count + ' times');

    //store copy of speed sent it(to pass for recursion)
    var s1 = speed;
    //set speed to 10*
    speed = speed * 10;

    //store parent width, and own width (if sub then add on width of parent div)
    var pwidth = $(id).parent('div').outerWidth();
    var width = (sub ? $(id).width() + pwidth : $(id).width());

    //set timeout
    var t = (width - pwidth) * speed;
    setTimeout(function () {
        var clone = $(id).clone().css('left', pwidth);
        $(id).addClass('oldul');
        $(id).after(clone);
        marquee(id + ':not(.oldul)', s1, true);
    }, t);

    $(id).animate({
        left: '-=' + width
    }, width * speed, 'linear', function () {
        $(this).remove();
    });
}

function log(text) {
    $('#log').append('<div>' + text + '</div>');
}

---

Solution
The issue was caused by passing the selector in with :not(.ulold); Here is the revised setTimeout

setTimeout(function(){
  var clone = $(id).clone().css('left', pwidth);
  $(id).addClass('oldul');
  var idx = id.split(':');
  idx = idx[0];
  log('idx: '+idx);
  $(idx).after(clone);
  marquee(idx+':not(.oldul)', s1, true);
},t);

Answer 1

问题很可能出在这段代码上。

    var clone = $(id).clone().css('left', pwidth);
    $(id).addClass('oldul');

您重复使用选择器的事实会把事情搞砸，因为随着时间的推移，原始选择器会匹配很多东西。

在初始调用中使用 marquee(' .ulscroll:not(.oldul)', 1, false);

Answer 2

学习使用好的调试器，例如 Firebug。您将看到最终动画结束回调（删除与选择器匹配的元素的回调）在匿名超时函数（调用 marquee 的回调）之前被调用。

示例页面上的代码存在问题（但不在发布的代码中）：tout 对于每次调用 marquee 都是本地的。 clearTimeout(tout) 调用不执行任何操作。

最后，请不要使用字幕。它存在可用性问题：移动文本更难阅读、会分散注意力，并且总是会移动对某些读者来说要么太快，要么对某些读者太慢。