Javascript Delay After Click, Set Timeout Not Working

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'

Solution 1:

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);
    }); 
});

Solution 2:

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/

Solution 3:

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);
    });
});