javascript - 试图重构这个 Javascript 并且失败了

Question

我正在开发一个网站，部分内容将是一个实时的“出发板”自动收报机，如下所示:

我在 C# 方面非常有经验，但对 Javascript 完全没有经验。

我发现以下 Javascript on SO 几乎可以满足我的要求:

<script type="text/javascript">

    $.fn.ticker = function (options) {

        options = $.extend({
            speed: 30
        }, options);

        var alph = 'ABCDEFGHIJKLMNOPQRSTUVXYZ01234567890,.:+=/();!- ';

        return this.each(function () {
            var k = 1,
            elems = $(this).children(),
            arr = alph.split(''),
            len = 0,
            fill = function (a) {
                while (a.length < len) {
                    a.push(' ');
                }
                return a;
            },
            texts = $.map(elems, function (elem) {
                var text = $(elem).text();
                len = Math.max(len, text.length);
                return text.toUpperCase();
            }),
            target = $('<div>'),
            render = function (print) {
                target.data('prev', print.join(''));
                fill(print);
                print = $.map(print, function (p) {
                    return p == ' ' ? '&#160;' : p;
                });
                return target.html('<span>' + print.join('</span><span>') + '</span>');
            },
            attr = {}

            $.each(this.attributes, function (i, item) {
                target.attr(item.name, item.value);
            });

            $(this).replaceWith(render(texts[0].split('')));

            target.click(function (e) {

                var next = fill(texts[k].split('')),
                prev = fill(target.data('prev').split('')),
                print = prev;

                $.each(next, function (i) {
                    if (next[i] == prev[i]) {
                        return;
                    }
                    var index = alph.indexOf(prev[i]),
                    j = 0,
                    tid = window.setInterval(function () {
                        if (next[i] != arr[index]) {
                            index = index == alph.length - 1 ? 0 : index + 1;
                        } else {
                            window.clearInterval(tid);
                        }
                        print[i] = alph[index];
                        render(print);
                    }, options.speed)
                });
                k = k == texts.length - 1 ? 0 : k + 1;
            });
        });
    };


    // Assign functions
    $('#mainfeatureslist').ticker();

    // Click it now
    $('#mainfeatureslist').click();


</script>

...结合必要的 JQuery 包含和适当的 HTML:

<div id="mainfeatureslistcontainer">
<ul id="mainfeatureslist">
<li>Live bus arrivals</li>
<li>Another feature here</li>
<li>Name of third feature</li>
</ul>
</div>

此代码生成一个列表，当单击该列表时，它会转换到下一个列表项。

但是，我希望列表以设定的时间间隔自动转换，无需点击。

我试过一个简单的软糖，即

setInterval($('#mainfeatureslist').click(), 6000);

...但是出于某种原因，这似乎使它感到困惑；它会中断进程并“跳转”到一个元素，然后什么也不会发生。

尽管对代码的作用有一个合理的想法，但我完全不知道如何重构它来做我想做的事!生成它自己的 .click 方法似乎是天生的 - 事实上，它是一段非常出色和紧凑的代码。

我如何将其重构为每 5 秒“翻转”一次列表？

Answer 1

setInterval expects a function - 现在你正在传递一些函数调用的返回值(在本例中是一个 jQuery 对象)。使用包含您要执行的代码的匿名函数:

setInterval(function() {
    $('#mainfeatureslist').click();
}, 6000);