setInterval and clearInterval jquery - stackoverflow in IE7

Question

I have a jquery code that is moving up and down continuously a div containing a list with logos. The animation is repeating within a set interval and is all seems to be working as expected in Chrome, FireFox and IE 9 and 8 (no console errors).

However in IE7 I get 'script error' and the browser totally freezes... I think the setInterval and clearInterval are not working properly or i have messed up my code...

Here it is:

//<!------------------LOGOS ------------------>

// the automatic scroll start immediately
$(document).ready(function () { membersLogos() });

// set the interval after which to restart the animated scroll
$(function () {

  var intervalID;
  var resetTimer = function () {
    if (intervalID) { clearInterval(intervalID) };
    intervalID = setInterval(function () {
        membersLogos();
    }, 190000);
  };

});

// set the interval after which to restart the animated scroll

function membersLogos() {
  var pane = $('#mypane');

  if ($('#mypane').length) {
    pane.jScrollPane({
        animateScroll: true, //added
        animateDuration: 95000, //added - length each way in milliseconds
        stickToTop: true,
        //autoReinitialise: true,
        enableKeyboardNavigation: true
    });

    var api = pane.data('jsp');
    var logosHeight = parseInt($('#mypane .jspPane').height());

    //listen to the x-axis scrolling event
    pane.bind('jsp-scroll-y', function (event, pos_y, at_top, at_bottom) {
        //we're at the bottom now lets scroll back to the top
        if (at_bottom) {
            api.scrollToY(0);
            $(this).unbind(event); //added with edit
            $(this).bind('jsp-scroll-y', function (event, pos_y, at_top, at_bottom) {
                if (at_top) {
                    $(this).unbind(event);
                    api.scrollToY(logosHeight);
                }

            });

        }

    });

    //initial animate scroll to the top
    api.scrollToY(logosHeight);
  }
}

Any ideas or suggestions as what is wrong? Thanks in advance! Vik

do you call resetTimer function – mgraph Dec 01 '11 at 12:00 — mgraph, Dec 01 '11 at 12:00

score 1 · Accepted Answer · answered Dec 01 '11 at 12:13

Since you've set your interval to exactly the sum of the two animations (190000 = 95000 * 2), I wouldn't be surprised if the interval function was being fired again before the animation completed, perhaps causing something to step on something else. It's easily checked: Just set your interval to 300000 or something and see if the problem goes away.

To avoid the possibility of having the interval fire again too soon, rather than using setInterval (which is almost always more trouble than it's worth), I'd see if jScrollPane offers you a completion callback when the animation is complete. If it does, use that completion callback to trigger the next animation. If it doesn't, I'd probably look to add it.

Thanks a lot! I shall look into that... I'll rethink the jquery and come up with something better. — Vikita, Dec 01 '11 at 14:27

setInterval and clearInterval jquery - stackoverflow in IE7

1 Answers1