Question

我正在开发一个网站，部分内容将是一个实时的“离职板”代码，如下：

departures board

我在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);

试图重构这个Javascript并解开

1 个答案: