Javascript delay after click, set timeout not working

Question

Thanks in advance for helping. I am new to JavaScript so i think i'm doing something basic incorrectly. I would like 'toggleclass' between class '.fa' and class '.fa-bars fa-times' to take 1 second after i click on class '.ubermenu-responsive-toggle'

The toggle between '.fa' and '.fa-bar fa times' after clicking on '.ubermenu-responsive-toggle' works. I just can't get the timeset delay down. I keep getting JavaScript errors in Chrome's inspector. I will put my best guess below. I'm sure this is something simple but, like I said, JavaScript is new territory for me.
Thanks again for your help.

jQuery(document).ready(function($) {
   $( '.ubermenu-responsive-toggle' ).on( 'click touchend' , setTimeout(function(){
      jQuery( this ).find( '.fa' ).toggleClass( 'fa-bars fa-times' );
   }, 1000));
});

What console error is it giving ? setTimeout is working properly. See Demo — Rohil_PHPBeginner
– Rohil_PHPBeginner, Commented May 2, 2015 at 10:27

Jose Mato · Accepted Answer · 2015-05-02 10:32:28Z

3

Be carefull with object "this" inside a setTimeout or setInterval function, because maybe could not be the object that you expect, try this:

jQuery(document).ready(function($) { 
    $( '.ubermenu-responsive-toggle' ).on( 'click touchend' , function() {
        var $myToggles = $(this).find( '.fa' );

        setTimeout(function() {
             $myToggles.toggleClass('fa-bars fa-times');
        }, 1000);
    }); 
});

answered May 2, 2015 at 10:32

Jose Mato

2,8091 gold badge20 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Karl Werner Over a year ago

Thanks Jose. This got the job done. I hope that there comes a day when I can contribute to the forum in a meaningful way. Stackoverflow is a great site. Cheers!

guest271314 · Accepted Answer · 2015-05-02 10:38:49Z

1

Try utilizing .delay() , .queue()

jQuery(document).ready(function($) {
  $(".ubermenu-responsive-toggle").on("click touchend", function(e) {
    jQuery(this).delay(1000, "toggle").queue("toggle", function() {
      jQuery(this).find(".fa").toggleClass("fa-bars fa-times");
    }).dequeue("toggle");
  });
});

jsfiddle http://jsfiddle.net/pLv0n1w4/1/

edited May 2, 2015 at 10:38

answered May 2, 2015 at 10:26

guest271314

1

Comments

Fabian Lurz · Accepted Answer · 2015-05-02 10:38:55Z

1

Try this

jQuery(document).ready(function ($) {
    $('.ubermenu-responsive-toggle').on('click touchend', function () {
        var that=jQuery(this);
        setTimeout(function () {
            that.find('.fa').toggleClass('fa-bars fa-times');
        }, 1000);
    });
});

edited May 2, 2015 at 10:38

answered May 2, 2015 at 10:26

Fabian Lurz

2,0396 gold badges26 silver badges55 bronze badges

Collectives™ on Stack Overflow

Javascript delay after click, set timeout not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related