异步加载内容不会减慢网站加载时间答案

【问题标题】：loading content asynchronous as to not slow down site load time异步加载内容不会减慢网站加载时间
【发布时间】：2018-08-02 05:07:20
【问题描述】：

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

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

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

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

$('#search_results').load(function(){ // 通过ajax加载相似词函数 });

然而，没有一个真正起作用，我也尝试使用 on()。因此，我不确定如何创建事件以在网站上异步加载内容。此外，我什至不确定这是否是实现我所追求的最佳方法。

在不减慢页面主要功能的情况下，加载功能的最佳方式是什么（很慢）？

【问题讨论】：

标签： jquery ajax asynchronous load ready

【解决方案1】：

你可能想要承诺：

您可以调用 Promise 函数并添加 .then() 函数。 .then() 函数中的所有内容都在 promise 被解决或拒绝后执行。您甚至可以将 Promise 一个接一个地链接起来以创建一个异步流程。

如果您在这样的函数中进行 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..
});

即使没有实例化 Promise 对象，这也可以工作。

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

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

【讨论】：