MixItUp: An operation was requested but the MixItUp instance was busy

Question

I have currently some crazy trouble with MixItUp 3.

I'm using the same Script and functions on the home page and also the subpages.

But only on home there will be a warning after the first filter process "WARNING: An operation was requested but the MixItUp instance was busy. The operation was rejected because the queue is full or queuing is disabled.".

The same script is also on subpages with the same data, but there it works fine.

Website: https://www.busse-miessen.de/relaunch-2018/#anwaelte

Script: https://www.busse-miessen.de/relaunch-2018/wp-content/themes/busse-miessen/js/main.js

Here you can find the most important part of the script:

var containerEl = document.querySelector('.media_list');
var mixer = mixitup(containerEl);

jQuery('#cat-expertise, #cat-rechtsgebiete').on('selectric-change change', function(e){

    if( mixer.isMixing() ) {
        console.log('isMixing: ' + mixer.isMixing());
        //return;
    }

    var $val = jQuery('#cat-expertise').val();
    var $val2 = jQuery('#cat-rechtsgebiete').val();

    console.log('$val: '+ $val +' - - '+'$val2: '+ $val2);

    var $filter = false;

    if( $val != '0' ) {
        //console.log($val);
        $filter = '.'+$val;
    }

    if( $val2 != '0' && $val != '0' ) {
        //console.log($val2);
        $filter = $filter+', '+'.'+$val2;
    } else if( $val2 != '0' ) {
        $filter = '.'+$val2;
    }

    console.log('final filter: '+$filter+' - State: '+mixer.isMixing());

    if( $filter ) {
        mixer.filter($filter);
    } else {

        $filter = '.mix';

        mixer.filter($filter);
    }
});

jQuery('#mix-sorting').on('selectric-change change', function(e){

    if( mixer.isMixing() ) {
        console.log('isMixing: ' + mixer.isMixing());
        //return;
    }

    var $val = jQuery('#mix-sorting').val();

    mixer.sort('name:'+$val);
});

It seems that "mixer.filter($filter);" (main.js #120) could not be finished, because after the first call of filter() the isMixing() function is all the way "true" also after MixItUp has completed.

Example output of the console.log() from above:

main.js:101 $val: cat-bauen-und-immobilien - - $val2: 0
main.js:117 final filter: .cat-bauen-und-immobilien - State: false
main.js:94 isMixing: true
main.js:101 $val: cat-bauen-und-immobilien - - $val2: 0
main.js:117 final filter: .cat-bauen-und-immobilien - State: true
main.js:94 isMixing: true
main.js:101 $val: cat-healthcare - - $val2: 0
main.js:117 final filter: .cat-healthcare - State: true
main.js:94 isMixing: true
main.js:101 $val: cat-healthcare - - $val2: 0
main.js:117 final filter: .cat-healthcare - State: true
main.js:94 isMixing: true
main.js:101 $val: cat-familie - - $val2: 0
main.js:117 final filter: .cat-familie - State: true
plugins.js:48 [MixItUp] WARNING: An operation was requested but the MixItUp instance was busy. The operation was rejected because the queue is full or queuing is disabled.

Please note, that this part is currently only commented out for debugging:

if( mixer.isMixing() ) {
    console.log('isMixing: ' + mixer.isMixing());
    //return;
}

If I use it with the «return» there, the script stops also working, because "mixer.isMixing()" is true all the time after the first call of filter().

Answer 1

Background

This error usually occurs because MixItUp was unable to "clean up" the previous operation. An operation is cleaned up when all targets which MixItUp expects to animate in someway (typically a fade, or a transform), have emitted a suitable transitionend event.

If some of the targets that MixItUp is waiting to complete their animation never emit that event, then MixItUp will wait indefinitely, and subsequent operations will be pushed into the queue. But because the first operation never completes, the queue grows until the queue limit is reached, and the error is emitted.

Solution

In your case, when switching from "Rechtsgebiete" to "Arbeitsrecht" for example, MixItup expects that 30 target elements will be animated, but only 29 emit a transitionend event. Because that last target never animates, the operation never completes.

The cause of the missing animation appears to be that you have a target in your container DOM with display: none applied to it (#lawyer-579). MixItUp does not know about this style and expects the target to included in the animation with its siblings.

If you have content which you wish to be removed from the grid, it would be best to not render it rather than to hide it via CSS.