Bootstrap模式在循环完成之前关闭

Question

我有下面的代码。单击时，将显示引导程序模态。显示模式时，将运行代码以遍历数组并过滤数据表实例。

这一切都很好。

但是模态立即关闭。我如何获得它，以便在所有搜索完成后关闭模式？

模态显示在页面中的特定事件上，所以我不能将其移到该ID上的特定点击动作之外

$( "#apply").on( "click", function() {
            console.log('[+] APPLY THE FILTERS');
            $('#loading').modal('show');

            $('#loading').on('shown.bs.modal', function (e) {
                table.search( '' ).columns().search( '' ).draw();
                $.each( array, function( key, value ) { 
                    var val = $('#'+key).val();

                    var string = $("select#"+key+" option:selected").map(function () {
                        return $(this).text();
                    }).get().join('|');

                    if (!Array.isArray(val) || !val.length || val=='MONGOOSEAHOY') {
                        return true;
                    }
                    else {
                        console.log('[+] COLUMN: '+key);
                        console.log('[+] STRING: '+string);
                        table.columns(array[key]).search('').draw();
                        if (key == 'SKILL_NAME' || key == 'DAILPATTERNDESCRIPTION' || key == 'CLOCKINTIME' || key == 'CLOCKOUTTIME' || key == 'PATTERNTYPEDESCRIPTION' || key == 'ABSTRACTION' || key == 'ABSTRACTIONS') {
                            table.columns(array[key]).search(string,true,false).draw();
                        }
                        else {
                            table.columns(array[key]).search('^('+string+')$',true,false).draw();
                        }
                    }
                });
            })

            $('#loading').modal('hide');

        });

Answer 1

您必须放置命令以将模态隐藏在shown.bs.modal函数中。还将shown.bs.modal放在click函数之外：

    $('#loading').on('shown.bs.modal', function (e) {
        table.search( '' ).columns().search( '' ).draw();
        $.each( array, function( key, value ) { 
            var val = $('#'+key).val();

            var string = $("select#"+key+" option:selected").map(function () {
                 return $(this).text();
            }).get().join('|');

            if (!Array.isArray(val) || !val.length || val=='MONGOOSEAHOY') {
                return true;
            } else {
                console.log('[+] COLUMN: '+key);
                console.log('[+] STRING: '+string);
                table.columns(array[key]).search('').draw();
                if (key == 'SKILL_NAME' || key == 'DAILPATTERNDESCRIPTION' || key == 'CLOCKINTIME' || key == 'CLOCKOUTTIME' || key == 'PATTERNTYPEDESCRIPTION' || key == 'ABSTRACTION' || key == 'ABSTRACTIONS') {
                    table.columns(array[key]).search(string,true,false).draw();
                } else {
                    table.columns(array[key]).search('^('+string+')$', true, false).draw();
                }
            }
        });
        $('#loading').modal('hide');
    });

    $("#apply").on( "click", function() {
        console.log('[+] APPLY THE FILTERS');            
        $('#loading').modal('show');           
    });