Question

我有一个网站搜索工具，有时需要几秒钟来加载结果，所以我添加了一个加载图像以在搜索时显示，并在搜索完成时消失。

    function search(category) {
        var loading = document.getElementById("#loading");
        loading.style.display = "block";
        var input = document.getElementById(category);
        var filter = input.value.toLowerCase();
        console.log(filter);
        var catagory_values = document.getElementsByClassName(category);
        var nodes = document.getElementsByClassName('search-row');

        for (i = 0; i < catagory_values.length; i++) {
            if (catagory_values[i].innerText.toLowerCase().includes(filter)) {
                nodes[i].style.display = "table-row";
            } else {
                nodes[i].style.display = "none";
            }
        }
        loading.style.display = "none";

    }

上面的函数实际上是用于多个搜索框的，在输入中它仅使用onkeyup来调用该函数。这样的搜索元素可以正常工作，但是未显示正在加载的图像，如果我注释掉loading.style.display = "none";行，则当我开始键入文字时它会开始显示该图像，但不会消失，但会随着它们的出现而消失完全没有显示，最近几天我一直在努力寻找答案，但是我一直无法这样做，我试图制作单独的函数并进行回调，但似乎无济于事。请测试，让我知道您是否有解决方案。谢谢

Answer 1

您可以使用async promise。

下面是一个示例，该示例使用async，然后等待该函数完成，然后运行then函数。

<input class="input" type="text">


         var loading = document.getElementById("#loading");

         async function search(category) {
            loading.style.display = "block";
            var input = document.getElementById(category);
            var filter = input.value.toLowerCase();
            console.log(filter);
            var catagory_values = document.getElementsByClassName(category);
            var nodes = document.getElementsByClassName('search-row');

            for (i = 0; i < catagory_values.length; i++) {
                if (catagory_values[i].innerText.toLowerCase().includes(filter)) {
                    nodes[i].style.display = "table-row";
                } else {
                    nodes[i].style.display = "none";
                }
            }


        }



        var _input = document.querySelector(".input");

_input.addEventListener("input",function(e){
   search(e.target.value).then(
          loading.style.display = "none"
    );
});

Answer 2

您可以在其他脚本完成后使用script标签中的defer关键字来运行它。

defer属性仅适用于外部脚本。

请参阅此以获取更多详细信息：https://javascript.info/script-async-defer

如何在运行第二功能之前等待第一个功能完成

2 个答案: