Javascript回调和模式匹配帮助

Javascript callback and pattern matching help

本文关键字：帮助 模式匹配 回调 Javascript      更新时间：2023-09-26

我正在尝试制作一个简单的搜索器/荧光笔，我遇到了结果不一致的困难/当我测试出来时什么都没有发生。

我认为最大的差距是我对回调函数应该如何工作以及选择器能够匹配什么的理解。

理想情况下，当点击标签时，一切都应该消失，只有匹配标签的潜水应该重新出现。如果没有匹配，那么没有找到的div应该出现，重置应该淡出，并使所有div (sans nomatchdiv)重新出现，不突出显示。

谁能提供一些澄清我可以改进的地方?

编辑:查看评论中的链接查看我的代码。

对问题的更多澄清:点击一个标签(旧，摄影，指南)，然后点击重置。这三个部分都应该重新出现，但只有两个出现了。

随机显示没有发现的结果。

如果您选择了一个标签，然后搜索不同的标签，淡入淡出将是异步的。

问题是.fadeout()在每个.workshopentry上，所以实际上是3个淡出。因此动画完成回调函数也被调用了3次!因此，决定显示和隐藏哪些新条目的逻辑被执行了3次，并导致了奇怪的多重衰落。

我已经用一个更健壮的解决方案更新了jsfiddle。

如果你需要更多关于JavaScript的解释，请告诉我。

您需要复制以下代码

   if (toFadeIn.length < 1) {      //No results found
        toFadeIn.push(noResults);
    }
    $(toFadeIn).each(function(index, div){
        div.fadeIn(1000);       
    });

在workshop.淡出的回调函数…像这样:

workshop.fadeOut(1000, function() {
        var tags = $('.left ul li', this);
        tags.removeClass('searchMatch');      //reset the search results
        tags.each(function() {                
            if ($(this).text().toLowerCase() === searchTerm.toLowerCase()) {
                $(this).addClass('searchMatch');
                toFadeIn.push($(this).parent().parent().parent());
            }
        });
        if (searchTerm === "") {
            toFadeIn.push(workshop);
        }
        if (toFadeIn.length < 1) {      //No results found
            toFadeIn.push(noResults);
        }
        $(toFadeIn).each(function(index, div){
           div.fadeIn(1000);       
         });    

    });

你看到了什么?淡出回调尚未调用，但您已经开始通过toFadeIn数组来显示搜索结果。那时，它甚至还没有搜索所有的条目。

这只是因为我们大多习惯了顺序代码，所以回调需要一点头脑。但它确实是这样工作的。你只需要继续把代码放入回调中。然后在另一个回调中，等等

相关文章：