Question

我有一个搜索引擎，结果的底部建议使用类似的单词。但是，类似的单词功能需要一段时间才能加载。为了获得用户体验，我想先显示搜索结果，然后在显示搜索结果后加载类似的单词，或者异步加载，以免减慢页面加载速度。

我的两个想法是：1.一旦为其加载了容器（该容器位于搜索结果下方），就调用相似的word函数。为此，我正在使用：

$('#search_similar_cont').ready(function(){
    // load similar words function through ajax
});

我的另一个想法是在搜索结果完成加载后就加载它，

$（'＃search_results'）。load（function（）{ //通过ajax加载类似单词的函数 }）;

但是，实际上没有任何作用，我也尝试使用on（）。因此，我不确定如何创建事件以真正在站点上异步加载内容。而且我什至不确定这是否是实现我所追求的最好的方法。

在不减慢页面主要功能的情况下加载功能的最佳方法是什么（速度相当慢）？

Answer 1

您可能希望兑现承诺：

您可以调用Promise函数并添加一个.then()函数。您的.then()函数中的所有内容都会在完成承诺或拒绝承诺后执行。您甚至可以一个接一个地链接诺言以创建异步流。

如果您在这样的函数中进行AJAX调用：

makeAjaxCall(method, url, payload, username, password) {

        return $.ajax({
                    type: method,
                    url: url,
                    beforeSend: function(xhr) {
                      xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
                    },
                    data: JSON.stringify(payload),
                    error: function(data, statusText, xhr) {
                        console.log(data, statusText, xhr.status)
                    },
                    success: function(data, statusText, xhr) {
                        console.log(data, statusText, xhr.status);
                    }
        });
    }

然后您可以像这样使用.then()关键字：

makeAjaxCall().then(function(data, statusText, xhr){
    do something after your ajax call is resolved..
},
function(data, statusText, xhr){
    do something if the promise was rejected..
});

即使不实例化承诺对象，此方法也可以工作。

在此处阅读有关JS Promise对象的更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

异步加载内容，以免减慢网站加载时间

1 个答案: