Question

我试图在getQuote()函数中使用jQuery回调参数，但它似乎不起作用。让我解释一切。

以下是getQuote()函数的小片段：

var getQuote = function(callback) {
  $.ajaxSetup({ cache: false });
  $.getJSON(
    "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&post",
    function(e) {
      var quoteText = e[0].content,
          quoteAuthor = e[0].title;

      $(".quote-text").html(
        '<i class="fa fa-quote-left" aria-hidden="true"></i>' + quoteText
      );
      $(".quote-author").html("- " + quoteAuthor);

      $("#tweet-quote").attr(
        "href",
        "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" +
           encodeURIComponent('"' + quoteText + '" ' + quoteAuthor));

      $("#tumblr-quote").attr(
        "href",
        "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,
          freecodecamp&caption=" +
          encodeURIComponent(quoteAuthor) +
          "&content=" +
          encodeURIComponent(quoteText) +
          "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=
          tumblr_share_button"
      );
    }
  );

  //setTimeout(function(){ callback(); }, 2000);
    callback();
};

如上所述：https://stackoverflow.com/a/19674400，我使用回调作为getQuote()函数参数，但它不会更改#new-quote outerHeight，它应该等于{{1} } outerHeight：

.quote-container

这张照片显示了运行此代码时发生的情况：

如您所见，1个元素的outerHeight不等于2个元素的outerHeight。

现在，如果我只改变getQuote(function() { $("#new-quote").outerHeight($(".quote-container").outerHeight()); });函数中的一个小细节：

在：

getQuote()

后：

//setTimeout(function(){ callback(); }, 2000);
callback();

是的，两个元素的outerHeight完全相同。

问题是，我不想使用setTimeout(function(){ callback(); }, 2000); //callback();功能，因为在某些情况下（例如慢速互联网连接）页面的加载速度最多可能需要2秒（如此功能所述），所以我我想删除这行代码，只使用setTimeout()。

然而，它不起作用。我应该更改什么，以便在callback();函数之后#new-quote outerHeight完全更改？

使用getQuote()函数代替console.log()工作。

当outerHeight()函数完成时，它应该更改getQuote()元素的outerHeight，但它仅在大约1秒后（如果互联网连接速度很快）和{{1} }，它只会在2秒后更改，无论互联网速度如何，因此如果连接速度很慢，.quote-container outerHeight将不会更改（例如，如果连接非常慢，因为它将无法在2秒内加载当然）。

Answer 1

需要在calback回调

中调用$.getJSON

这是更新后的笔：https://codepen.io/anon/pen/Rxpbwy

以下是改变的要点：

回调不会等待ajax getJSON完成，它会在此之前运行。您必须将callback()移到getJSON

的成功回调中

前

 $.getJSON(
    "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&post",
    function(e) {
      ...
    }
  );
  callback(); // the request may or may not be done, but most likely not.

后

 $.getJSON(
    "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&post",
    function(e) {
      ...
      callback(); // the request is done and successful
    }
  );

getQuote（）函数完成后，更改#new-quote元素的outerHeight

1 个答案: