MixItUp:请求了一个操作，但是MixItUp实例很忙

Question

我目前有一些疯狂的麻烦与MixItUp 3。

我在主页和子页面上使用相同的脚本和函数。

但是，只有在第一个筛选进程“警告:请求了一个操作，但MixItUp实例很忙”之后，才会出现警告。该操作被拒绝，因为队列已满或队列已禁用。

同样的脚本也在具有相同数据的子页面上，但是在那里它工作得很好。

网址：https://www.busse-miessen.de/relaunch-2018/#anwaelte

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

在这里，您可以找到脚本中最重要的部分：

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

似乎"mixer.filter($filter);“(main.js #120)无法完成，因为在第一次调用filter()之后，isMixing()函数在MixItUp完成后也一直是"true”。

上面console.log()的示例输出：

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.

请注意，此部分目前仅供调试时注释掉：

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

如果我在返回时使用它，脚本也会停止工作，因为在第一次调用filter()之后，"mixer.isMixing()“一直是真的。

Answer 1

背景

此错误通常发生是因为MixItUp无法“清理”上一次操作。当MixItUp希望以某种方式动画的所有目标(通常是淡出或转换)发出适当的transitionend事件时，操作就会被清除。

如果MixItUp正在等待完成其动画的一些目标从未发出该事件，那么MixItUp将无限期地等待，随后的操作将被推入队列。但是，由于第一个操作从未完成，队列将增长，直到达到队列限制，并发出错误。

解决方案

例如，在您的示例中，当从"Rechtsgebiete“切换到"Arbeitsrecht”时，MixItup预计30个目标元素将被动画化，但只有29个发出一个transitionend事件。因为最后一个目标从未动过，所以操作永远不会完成。

缺少动画的原因似乎是容器DOM中有一个目标，其中应用了display: none (#lawyer-579)。MixItUp不知道这种样式，并期望目标与其兄弟姐妹一起包含在动画中。

如果您有希望从网格中删除的内容，最好不要渲染它，而不是通过CSS隐藏它。