Disable after executing it

Question

I have 2 events

Firstly:

$(window).on("scroll", function() { if (($(this).scrollTop()+h) >= $(".services-procent-ul").offset().top){ circle(); $(window).off("scroll"); } }); 

Secondly:

 $(window).on("scroll", function() { if($(window).scrollTop() > 0){ $('.nav2').fadeIn('slow'); $('.nav1').fadeOut('fast'); }else{ $('.nav2').fadeOut('fast'); $('.nav1').fadeIn('slow'); } }); 

The first event that I need to disable after its execution. But I need to execute the second event.

Answer 1

You can add an event namespace to the first event and disable it in the namespace wherever you want:

 $(window).on("scroll.once", function() { ... $(window).off("scroll.once"); 

Answer 2

If you want to "disable" the event after it is executed, you can use jQuery . one ()

The .one () method is identical to .on (), except that the handler is not bound after the first call

 $(window).one("scroll", function() { //doSomething }); 

If you are looking for a way to disable the callback of a specific event after a certain condition and not disable all of them, you can add an event namespace as @antyrat answered

Answer 3

Try using $.Callbacks("once") to call circle no more than once if the condition ($(this).scrollTop()+h) >= $(".services-procent-ul").offset().top returns true

  var callbacks = $.Callbacks("once"); callbacks.add(circle); var scroller = function() { if ($(window).scrollTop() > 0) { $('.nav2').fadeIn('slow'); $('.nav1').fadeOut('fast'); } else { $('.nav2').fadeOut('fast'); $('.nav1').fadeIn('slow'); } } $(window).on("scroll", function() { if (($(this).scrollTop()+h) >= $(".services-procent-ul").offset().top) { callbacks.fire() } scroller() });