2

我目前在使用 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 完成后也一直为“真”。

上面 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”一起使用，脚本也会停止工作，因为“mixer.isMixing()”在第一次调用 filter() 后一直为真。

4

1 回答 1

2

背景

出现此错误通常是因为 MixItUp 无法“清理”之前的操作。当 MixItUp 期望以某种方式设置动画的所有目标（通常是淡入淡出或变换）都发出了合适的transitionend事件时，操作就会被清除。

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

解决方案

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

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

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

于 2018-10-01T20:13:37.607 回答