2

How can I have these functions run one after the other, so each one finished before the next starts?

        $(window).unbind();

        $('.buyersseclink').removeClass('buyersseclinkon');

        $(this).parent().delay(900).addClass('buyersseclinkon');

        $(window).bind('scroll', function () { 
            $('.buyersseclink').removeClass('buyersseclinkon');
        });

Thanks

Evanss
  • 23,390
  • 94
  • 282
  • 505
  • possible duplicate of [jquery synchronous functions](http://stackoverflow.com/questions/1774077/jquery-synchronous-functions) – CraigTP Feb 09 '11 at 12:22
  • @BoltClock, the functions are run after the Smooth Scroll plugin is triggered. $(this) is the link that was clicked on. https://github.com/kswedberg/jquery-smooth-scroll What im trying to do is when a link is clicked my active span class of buyersseclinkon is removed from all links, and just applied to the link that was clicked on. When ever you scroll the window I also need the active class to be removed. – Evanss Feb 09 '11 at 12:52

1 Answers1

2

delay() does not work with methods such as addCless. As the jQuery documentation suggests you should use setTimeout instead:

   $(window).unbind();

   $('.buyersseclink').removeClass('buyersseclinkon');

   var current = this; // Store reference, because in the setTimeout callback "this" maybe referring to something else

   window.setTimeout(function() {
     $(current ).parent().addClass('buyersseclinkon');
     $(window).bind('scroll', function () { 
       $('.buyersseclink').removeClass('buyersseclinkon');
     });
   }, 900);
RoToRa
  • 37,635
  • 12
  • 69
  • 105
  • @RoToRa The delay was one work around I thought of, but essentially I have 4 functions, and I need each one to run after the previous one has finished. Can this be done? I assumed there would be a standard way but im quite new to jquery. Thanks – Evanss Feb 09 '11 at 12:50
  • The other functions should be running successively just the way they are. They are not asynchronous in any way. – RoToRa Feb 09 '11 at 13:07
  • Its working, thanks. Just out of interest, why do some of the functions run successively and other not? – Evanss Feb 09 '11 at 13:28
  • In your case all functions run successively - which is how it normally is. You just wanted to have a pause in between. What aren't successive are AJAX calls and `setTimeout`. So if a function uses those you need to use a callback function (like the first parameter of setTimeout). Normally such functions will allow you to provide a callback function. You'll need to read to it's documentation. – RoToRa Feb 10 '11 at 11:14
  • OK thanks. If their run successively, then presumable each one doenst finish before the next runs? Otherwise my initial code should have worked. Is there an easy way of making each function wait for the previous function to finish? Thanks – Evanss Feb 11 '11 at 08:18
  • The problem with your original code, was that `delay()` only applies to animations and not things like `addClass()`. – RoToRa Feb 11 '11 at 10:43