MixItUp：请求了一个操作，但 MixItUp 实例正忙

Question

我目前在使用 MixItUp 3 时遇到了一些疯狂的麻烦。

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

但只有在主页上才会在第一次过滤过程后出现警告 "WARNING: An operation was requested but the MixItUp instance was busy. The operation was rejected because the queue is full or queuing is disabled."。

相同的脚本也出现在具有相同数据的子页面上，但在那里工作正常。

网站：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() 函数后，一路都是"true"同样在 MixItUp 完成后。

上面 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;
}

如果我将它与那里的 «return» 一起使用，脚本也会停止工作，因为在第一次调用 filter() 之后 "mixer.isMixing()" 始终为真。

Answer 1

背景

发生此错误的原因通常是 MixItUp 无法 "clean up" 之前的操作。当 MixItUp 期望以某种方式（通常是淡入淡出或变换）进行动画处理的所有目标都发出了合适的 transitionend 事件时，操作就会被清除。

如果 MixItUp 正在等待完成其动画的某些目标从未发出该事件，则 MixItUp 将无限期等待，后续操作将被推入队列。但是因为第一个操作永远不会完成，所以队列会一直增长，直到达到队列限制，然后才会发出错误。

解决方案

在您的情况下，例如，当从 "Rechtsgebiete" 切换到 "Arbeitsrecht" 时，MixItup 预计将对 30 个目标元素进行动画处理，但只有 29 个会发出 transitionend 事件。因为最后一个目标永远不会动画，所以操作永远不会完成。

动画丢失的原因似乎是您的容器 DOM 中有一个目标应用了 display: none (#lawyer-579)。 MixItUp 不知道此样式并希望目标与其兄弟一起包含在动画中。

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

MixItUp：请求了一个操作，但 MixItUp 实例正忙

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

javascript

jquery

mixitup

背景

解决方案