javascript - MixItUp:已请求操作，但MixItUp实例忙

我目前在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（）之后，在MixItUp完成之后，isMixing（）函数也一直为“ 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（）”始终为true。

最佳答案

背景

通常会发生此错误，因为MixItUp无法“清理”先前的操作。当MixItUp希望以某种方式进行动画处理的所有目标（通常是淡入淡出或变换）发出适当的transitionend事件时，便会清理操作。

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

解

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

缺少动画的原因似乎是您在容器DOM中有一个目标，并对其应用了display: none（#lawyer-579）。 MixItUp不知道这种风格，希望目标及其同级对象包含在动画中。

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