javascript - MixItUp:请求了一个操作，但 MixItUp 实例正忙

Question

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

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

但只有在 home 上，在第一个过滤过程后才会出现警告“警告:请求了一个操作，但 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;
}

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

Answer 1

背景

这个错误的发生通常是因为 MixItUp 无法“清理”之前的操作。当 MixItUp 期望以某种方式(通常是淡入淡出或变换)进行动画处理的所有目标都已发出合适的 transitionend 事件时，操作将被清除。

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

解决方案

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

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

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