Databases
StackOverflow2013
Postsdbo
POHow to queue a jQuery function to prevent incorrect behaviour if it is called again too quickly
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to queue a jQuery function to prevent incorrect behaviour if it is called again too quickly
    primarykey
    data
    text
    <p>I have written a function which fires when a particular menu item is clicked. essentially the code replaces (by changing class to .activedock) a dock at the bottom of the page along with the name of said dock which is pulled from the ('li') in the menu which has been clicked. This is a little hard to articulate but hopefully this makes sense.</p> <p>All of this is animated with the extended jquery-ui versions of addClass and removeClass to give the effect of the dock sliding off the bottom of the screen and the replacement selected dock being slid up into place. At the same time the dock name fades out, is replaced and the new name fades back into place.</p> <p>This all works wonderfully, however the effect screws up if i select another menu item while the animation is still taking place. What a need to do is to modify the code below to simply queue the function if it is called again while the animation is still taking place. Alternatively, if this proves to complicated, I would be happy to just be able to prevent the function from being called again while it is still active.</p> <p>Does anyone know how I would go about this.</p> <pre><code>function selectFilter($this) { var $filtername = $this.text(); var $activedock = $('.activedock'); $selected_dock = $('#' + $filtername); $name = $('#filter_name').find('h1'); if ( $filtername == $activedock.attr('id') ) { return false; } var $filtertext = $filtername; $activedock.removeClass('activedock', 1000); $name.fadeOut('1000', function() { $selected_dock.addClass('activedock','1000'); $name.text($filtertext); $name.fadeIn('1000', function() { var $menuWidth = $('#filter_name').width(); $('#filter_menu').css('min-width', $menuWidth); }); }); } </code></pre> <p>P.S. I am relatively new to jQuery so my apologies if the code above is not using best practice etc.... I'm still learning.</p> <p>Also the above function is called when the user clicks the menu item as shown in the code below:-</p> <pre><code>//Show filter menu $(document).ready(function() { $('#full-width-layout_c1_col-1-1_1').on( 'mouseenter mouseleave click', '#filter_name', function(event) { var $menu = $('#filter_menu'); var $icon = $('#popupicon'); //Hover over Filter Name if (event.type == 'mouseenter') { $menu.addClass('menu_hovered_item'); $icon.show('fade', 200); } else if (event.type == 'mouseleave'){ $menu.removeClass('menu_hovered_item'); $icon.hide('fade', 200); } //Open menu on click else if (event.type == 'click'){ $menu.show('fade','slow'); //hover or click on menu item $('#full-width-layout_c1_col-1-1_1').on( 'mouseenter mouseleave click', '#filter_menu li', function(event) { var $menuItem = $(this); if (event.type == 'mouseenter') { $menuItem.addClass('menu_hovered_item'); } else if (event.type == 'mouseleave'){ $menuItem.removeClass('menu_hovered_item'); } else if (event.type == 'click'){ var $this = $(this); selectFilter($this); $menu.hide(); } }); } }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USgordyr
    1. USgordyr
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to queue a jQuery function to prevent incorrect behaviour if it is called again too quickly
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to queue a jQuery function to prevent incorrect behaviour if it is called again too quickly
      1. USVilius Paulauskas
      1. VTFavorite
    3. VO
      singulars
      1. POHow to queue a jQuery function to prevent incorrect behaviour if it is called again too quickly
      1. USJelkster
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload