在 MixItUp jQuery 插件中应用过滤器后如何在“mixEnd”上调用函数？答案

【问题标题】：How to call function on 'mixEnd' after filter has been applied in MixItUp jQuery plugin?在 MixItUp jQuery 插件中应用过滤器后如何在“mixEnd”上调用函数？
【发布时间】：2014-10-30 15:04:16
【问题描述】：

期望的行为

我想在mixItUp 完成过滤功能后调用自定义函数。

MixItUp 在从下拉列表中选择一个值时被唤起。

当前行为

为了演示和测试功能，我在mixEnd 上调用alert()。

选择一个值后警告框显示的次数在每次后续选择时都会增加，即第一次选择后显示一次，第二次选择后显示两次。

jQuery

//define function
function initFilters() {
    $('#container').mixItUp({
        layout: {
            display: 'block'
        },
        animation: {
            duration: 1000,
            effects: 'translateZ(-360px) stagger(110ms) fade',
            easing: 'ease'
        }
    });
}

// call function
initFilters();

// define .on behavior
$('#area_filter, #rating_filter').on('change', function () {
    $('#container').mixItUp('filter', this.value);

    // do something on mixEnd
    $('#container').on('mixEnd', function(e, state){
        alert('MixItUp finished!');
    });

});

jsFiddle

http://jsfiddle.net/rwone/e3c6x29f/

复制步骤

访问 jsFiddle。
从下拉列表中选择一个区域（将显示一个警报）。
从下拉列表中选择另一个区域（将显示两个警报）。

问题

在MixItUp 中有多种方法可以应用多个函数和回调，如下所示。

因此我的问题是：

如何解决警报框逐渐显示的不良行为？
以下哪种方法是实现所需行为的最优雅方法（因为我怀疑我当前的方法会导致问题）？

选项

multiMix (https://mixitup.kunkalabs.com/docs/#method-multiMix)

例子：

$('#container').mixItUp('multiMix', {
    filter: '.category-1, .category-2',
    sort: 'name:asc',
    changeLayout: {
        containerClass: 'flex'
    }
});

使用 onMixEnd 回调 (https://mixitup.kunkalabs.com/docs/#prop-callbacks-onMixEnd)

$('#container').mixItUp({
    callbacks: {
        onMixEnd: function(state){
            alert('Operation ended');
        }
    }
});

还有一个这种方法的例子（我目前正在使用）：

$('#container').on('mixEnd', function(e, state){
    alert('MixItUp finished!');
});

【问题讨论】：

标签： jquery mixitup

【解决方案1】：

这里是一种解决方案，虽然仍然不确定是否最优雅，但它解决了不希望的多重触发行为。

我所要做的就是将.on('mixEnd', function(e, state) 移出下拉选择区域，如下所示：

//define function
function initFilters() {
    $('#container').mixItUp({
    layout: {
        display: 'block'
    },
    animation: {
        duration: 1000,
        effects: 'translateZ(-360px) stagger(110ms) fade',
        easing: 'ease'
    }
    });
}

// do something on mixEnd <-- added here
$('#container').on('mixEnd', function(e, state){
alert('MixItUp finished!');
});

// call function
initFilters();

// define .on behavior
$('#area_filter, #rating_filter').on('change', function () {
    $('#container').mixItUp('filter', this.value);

// <-- removed from here

});

jsFiddle

http://jsfiddle.net/rwone/e3c6x29f/8/

【讨论】：