Question

I’m developing a website, and part of the content will be a live ‘departures board’ ticker, as such:

I’m very experienced at C#, but have absolutely no experience with Javascript.

I’ve found the following Javascript on SO which almost does what I want:

<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>

…combined with the necessary include of JQuery and the appropriate 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>

This code generates a list which, when clicked, transitions to the next list item.

However, I want the list to automatically transition at a set interval, with no clicks required.

I’ve tried a simple fudge, i.e.

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

…but this seems to confuse it for some reason; it interrupts the process and ‘jumps’ to an item, then nothing further happens.

Despite having a reasonable idea of what the code does, I’ve absolutely no idea how to re-factor it to do what I want! It seems hard-wired to generate its own .click methods – in fact, it is a very brilliant and compact piece of code.

How do I refactor this to ‘flip’ the list every 5 seconds?

Answer 1

setInterval expects a function – right now you are passing in the return value of some function call (in this case a jQuery object). Use an anonymous function containing the code you want to execute instead:

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