Question

我在实现动态搜索栏时面临一个奇怪的问题，该搜索栏旨在在动态填充表中查找值。

这是有罪的破解代码：

$('#myTable-searchInputBar').on('keyup', function(){
    var value = $(this).val();
    $.when(toggleTableVisibility()).then(function(){
        if($('.myTable-selected').attr('tab') != 'tuttiTab'){
            tabVisibility($('.myTable-tabInDiv[tab="tuttiTab"]'));
        }
        if(value.length > 2){
            $.when(findInArray($('.myTableRow'), isNaN(value) ? value.toLowerCase() : value)).then(toggleTableVisibility());
        }else{
            $.when(showAllRows()).then(toggleTableVisibility());
        }
    })
});

这里是主要功能召回的三个功能：

function toggleTableVisibility(){
    var deferred = $.Deferred();
    $('#loadingDiv').toggle();
    $('#tableContainer').toggle();
    deferred.resolve();
    return deferred.promise();
}

function findInArray(json, val) {
    var deferred = $.Deferred();
    $(json).each(function(){
        $(this).addClass('nonSelectedRow');
        $(this).find('.myTableCol:not(".nonSelectedCol")').each(function(){
            var text = isNaN($(this).text()) ? $(this).text().toLowerCase() : $(this).text();
            if(text.indexOf(val) != -1){
                $(this).closest('tr').removeClass('nonSelectedRow');
                return false;
            }
        });
    });
    deferred.resolve();
    return deferred.promise();
}

function showAllRows(){
    var deferred = $.Deferred();
    if($('.myTableRow.nonSelectedRow').length > 0){
        $('.myTableRow.nonSelectedRow').removeClass('nonSelectedRow');
    }
    deferred.resolve();
    return deferred.promise();
}

我很确定上面的代码可以进行优化和改进，但这不是问题的关键：当我在调试中运行它时，会正确遵循所有步骤并完全实现预期的行为。当我禁用所有断点并让代码像普通用户导航一样流动时，我看到的是它似乎“冻结”2/3秒（取决于给定表中存在多少元素）然后它过滤掉所有值的“解冻”。函数toggleTableVisibility（）应该隐藏表并显示带有旋转轮的加载gif。

我错过了一些基本观点吗？正如你猜测的那样，我是jQuery和javascript的新手。提前感谢您提供的任何帮助/建议

PS 我认为代码非常自我解释，但如果您需要更多关于它的评论，我将很乐意提供它。

jQuery deferred / promise仅在调试模式

0 个答案: