由于折旧而转换为ajax async false替代

Question

我已经对这个问题进行了研究并找到了一些解决方案。但是，并非每一个都有效。据我所知，async false会产生一个UI块，这不应该是。我可以使用覆盖直到ajax请求完成，并且在请求成功时，隐藏覆盖。

这是我尝试在getNewQuote()函数中使用回调参数（只是它的一小部分）：

＆＃13;

＆＃13;

var getNewQuote = function(callback) {
  var quote = {};
  setTimeout(function() {
    quote.text = 'Example';
    quote.author = 'Example';
    callback();
    return quote;
  }, 4000);
};

getNewQuote(function() {
  console.log("DONE");
  var getRandomColor = function() {
  var colors = [
      "#ff9966",
      "#7f00ff",
      "#396afc",
      "#0cebeb",
      "#06beb6",
      "#642b73",
      "#36d1dc",
      "#cb356b",
      "#3a1c71",
      "#ef3b36",
      "#159957",
      "#000046",
      "#007991",
      "#56ccf2",
      "#f2994a",
      "#e44d26",
      "#4ac29a",
      "#f7971e",
      "#34e89e",
      "#6190e8",
      "#3494e6",
      "#ee0979"
    ],
    randomNumber = Math.floor(Math.random() * colors.length);
  return colors[randomNumber];
};

var updateText = function($t, qt) {

  var twitter = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
  twitter += '"' + qt.text + '" ';
  twitter += qt.author;

  var tumblr = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=";
  tumblr += qt.author;
  tumblr += "&content=";
  tumblr += qt.text;
  tumblr += "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button";

  var $icon = $("<i class='fa fa-quote-left'>")
    .prop("aria-hidden", true);

  $t.find(".quote-text").html("").append($icon, qt.text);
  $t.find(".quote-author").html("- " + qt.author);
  $("#tweet-quote").attr("href", twitter);
  $("#tumblr-quote").attr("href", tumblr);
};

var calcNewHeight = function(q) {
  var $temp = $("<div>", {
    class: "quote-container temp",
  }).appendTo($("body"));
  $temp.append($("<div>", {
    class: "quote-text"
  }), $("<div>", {
    class: "quote-author"
  }));
  updateText($temp, q);
  var h = $temp.height() + 40;
  $temp.remove();
  return h;
};

var changeColor = function(newColor) {
  $("body, .button:not(#new-quote)").animate({
    backgroundColor: newColor
  });
  $("#new-quote").animate({
    color: newColor
  });
  $(".quote-text, .quote-author").css("color", newColor);
  if ($("#modStyle").length === 0) {
    $("head").append(
      "<style id='modStyle'>#new-quote:before {background:" + newColor + ";}</style>"
    );
  } else {
    $("head style#modStyle").html("#new-quote:before {background:" + newColor + ";}");

  }
};

var getQuote = function() {
  var nq, nc, nh = 0;

      nq = getNewQuote();
      nc = getRandomColor();
      nh = calcNewHeight(nq);
  
      $(".quote-container").children().css("opacity", 0);
      changeColor(nc);
  
      $(".quote-container, #new-quote").animate({
        height: nh,
      }, {
        duration: 1000,
        queue: false
      });

      $(".quote-container").animate({
        padding: "2.5em"
      }, {
        duration: 1000,
        queue: false
      });

      $("#new-quote").animate({
        padding: "2.5em .75em"
      }, {
        duration: 1000,
        queue: false
      });
  
      updateText($(".quote-container"), nq);
      $(".quote-container").children().fadeTo(750, 1);
};

  $("#new-quote").on("click", getQuote);
  $(".quote-container, #new-quote").css({
    visibility: "visible",
    height: 0
  });
  $("#new-quote").css("padding", "0 .75em");
  getQuote();
});

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #333;
  color: #333;
  font-family: sans-serif;
}

.v-wrap {
  height: 100%;
  text-align: center;
}

.v-wrap:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}

.quote-container {
  width: 31.25rem;
  background: #fff;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.1875rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  visibility: hidden;
  padding: 0 2.5rem;
}

.quote-text {
  font-size: 1.625rem;
}

.quote-text i {
  margin-right: 0.6rem;
}

.quote-text p {
  display: inline;
}

.quote-author {
  font-size: 1rem;
  margin: 0 0.4rem 2rem 0;
  text-align: right;
}

.button {
  padding: 0.75rem;
  text-align: center;
  font-size: 1rem;
  color: #fff;
  border-radius: .1875rem;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.button:not(#new-quote):hover {
  opacity: .8 !important;
}

.button:not(#new-quote) {
  min-width: 1rem;
  min-height: 1rem;
}

.button i {
  vertical-align: middle;
}

#new-quote {
  white-space: nowrap;
  writing-mode: vertical-lr;
  height: 50%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  vertical-align: middle;
  background: #fff !important;
  margin: 0;
  position: relative;
  right: 0.25625rem;
  color: #333;
  visibility: hidden;
}

#new-quote:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0.0625rem;
  bottom: 0;
  left: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

#new-quote:hover:before {
  visibility: visible;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

footer {
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

footer a {
  text-decoration: none;
  color: #fff;
  position: relative;
}

footer a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: .0625rem;
  bottom: 0;
  left: 0;
  background: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all .3s ease-in-out 0s;
  transition: all .3s ease-in-out 0s;
}

footer a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="v-wrap">
  <div class="quote-container" style="">
    <div class="quote-text">
    </div>
    <div class="quote-author"></div>
    <a id="tweet-quote" class="button"><i class="fa fa-twitter"></i></a>
    <a id="tumblr-quote" class="button"><i class="fa fa-tumblr"></i></a>
  </div>
  <div id="new-quote" class="button">New quote</div>
  <footer>
    <a href="https://codepen.io/Kestis500">Created by LukasLSC</a>
  </footer>
</div>

＆＃13;

＆＃13;

＆＃13;

代码输出： 如你所见，ajax并不成功

  

未捕获TypeError：回调不是函数而且未捕获TypeError：无法读取属性＆＃39; text＆＃39;未定义的（仅在堆栈片段中）。

如果删除getQuote();函数调用，我发现此错误消失了。但是，我需要称之为，过度，我的项目不会起作用。我还尝试使用return $.ajax，但有return quote行，所以我无法使用它。完整的代码可以在codepen上找到：https://codepen.io/Kestis500/pen/ZvyxKB?editors=0110。

然后我使用jQuery promises切换到另一个方法，并在此线程中使用了信息：https://stackoverflow.com/a/40658281/8889739。完整代码：https://codepen.io/Kestis500/pen/qpjxoq?editors=0110。

＆＃13;

＆＃13;

var MyFirstFunction = function() {
  var getNewQuote = function(callback) {
    var quote = {};
    setTimeout(function() {
      quote.text = 'Example';
      quote.author = 'Example';

      return quote;
    }, 4000);
  };
}

var MySecondFunction = function() {
  console.log("DONE");
  var getRandomColor = function() {
    var colors = [
        "#ff9966",
        "#7f00ff",
        "#396afc",
        "#0cebeb",
        "#06beb6",
        "#642b73",
        "#36d1dc",
        "#cb356b",
        "#3a1c71",
        "#ef3b36",
        "#159957",
        "#000046",
        "#007991",
        "#56ccf2",
        "#f2994a",
        "#e44d26",
        "#4ac29a",
        "#f7971e",
        "#34e89e",
        "#6190e8",
        "#3494e6",
        "#ee0979"
      ],
      randomNumber = Math.floor(Math.random() * colors.length);
    return colors[randomNumber];
  };

  var updateText = function($t, qt) {

    var twitter = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
    twitter += '"' + qt.text + '" ';
    twitter += qt.author;

    var tumblr = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=";
    tumblr += qt.author;
    tumblr += "&content=";
    tumblr += qt.text;
    tumblr += "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button";

    var $icon = $("<i class='fa fa-quote-left'>")
      .prop("aria-hidden", true);

    $t.find(".quote-text").html("").append($icon, qt.text);
    $t.find(".quote-author").html("- " + qt.author);
    $("#tweet-quote").attr("href", twitter);
    $("#tumblr-quote").attr("href", tumblr);
  };

  var calcNewHeight = function(q) {
    var $temp = $("<div>", {
      class: "quote-container temp",
    }).appendTo($("body"));
    $temp.append($("<div>", {
      class: "quote-text"
    }), $("<div>", {
      class: "quote-author"
    }));
    updateText($temp, q);
    var h = $temp.height() + 40;
    $temp.remove();
    return h;
  };

  var changeColor = function(newColor) {
    $("body, .button:not(#new-quote)").animate({
      backgroundColor: newColor
    });
    $("#new-quote").animate({
      color: newColor
    });
    $(".quote-text, .quote-author").css("color", newColor);
    if ($("#modStyle").length === 0) {
      $("head").append(
        "<style id='modStyle'>#new-quote:before {background:" + newColor + ";}</style>"
      );
    } else {
      $("head style#modStyle").html("#new-quote:before {background:" + newColor + ";}");

    }
  };

  var getQuote = function() {
    var nq, nc, nh = 0;

    nq = getNewQuote();
    nc = getRandomColor();
    nh = calcNewHeight(nq);

    $(".quote-container").children().css("opacity", 0);
    changeColor(nc);

    $(".quote-container, #new-quote").animate({
      height: nh,
    }, {
      duration: 1000,
      queue: false
    });

    $(".quote-container").animate({
      padding: "2.5em"
    }, {
      duration: 1000,
      queue: false
    });

    $("#new-quote").animate({
      padding: "2.5em .75em"
    }, {
      duration: 1000,
      queue: false
    });

    updateText($(".quote-container"), nq);
    $(".quote-container").children().fadeTo(750, 1);
  };

  $("#new-quote").on("click", getQuote);
  $(".quote-container, #new-quote").css({
    visibility: "visible",
    height: 0
  });
  $("#new-quote").css("padding", "0 .75em");
  getQuote();
}

MyFirstFunction().done(MySecondFunction);

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #333;
  color: #333;
  font-family: sans-serif;
}

.v-wrap {
  height: 100%;
  text-align: center;
}

.v-wrap:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}

.quote-container {
  width: 31.25rem;
  background: #fff;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.1875rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  visibility: hidden;
  padding: 0 2.5rem;
}

.quote-text {
  font-size: 1.625rem;
}

.quote-text i {
  margin-right: 0.6rem;
}

.quote-text p {
  display: inline;
}

.quote-author {
  font-size: 1rem;
  margin: 0 0.4rem 2rem 0;
  text-align: right;
}

.button {
  padding: 0.75rem;
  text-align: center;
  font-size: 1rem;
  color: #fff;
  border-radius: .1875rem;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.button:not(#new-quote):hover {
  opacity: .8 !important;
}

.button:not(#new-quote) {
  min-width: 1rem;
  min-height: 1rem;
}

.button i {
  vertical-align: middle;
}

#new-quote {
  white-space: nowrap;
  writing-mode: vertical-lr;
  height: 50%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  vertical-align: middle;
  background: #fff !important;
  margin: 0;
  position: relative;
  right: 0.25625rem;
  color: #333;
  visibility: hidden;
}

#new-quote:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0.0625rem;
  bottom: 0;
  left: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

#new-quote:hover:before {
  visibility: visible;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

footer {
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

footer a {
  text-decoration: none;
  color: #fff;
  position: relative;
}

footer a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: .0625rem;
  bottom: 0;
  left: 0;
  background: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all .3s ease-in-out 0s;
  transition: all .3s ease-in-out 0s;
}

footer a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="v-wrap">
  <div class="quote-container" style="">
    <div class="quote-text">
    </div>
    <div class="quote-author"></div>
    <a id="tweet-quote" class="button"><i class="fa fa-twitter"></i></a>
    <a id="tumblr-quote" class="button"><i class="fa fa-tumblr"></i></a>
  </div>
  <div id="new-quote" class="button">New quote</div>
  <footer>
    <a href="https://codepen.io/Kestis500">Created by LukasLSC</a>
  </footer>
</div>

＆＃13;

＆＃13;

＆＃13;

代码输出： 它打破了一切，灰色屏幕是因为默认的codepen背景

  

未捕获的TypeError：无法读取属性＆＃39;已完成＆＃39;未定义的

Answer 1

您正在使用异步操作的回调中的return。这只是设置该回调的返回值（在setTimeout或XHR的回调的情况下被忽略），它不会设置函数的返回值。

您无法从您的函数返回值，这就是您添加回调的原因。代替：

var getNewQuote = function(callback) {
  var quote = {};
  setTimeout(function() {
    quote.text = 'Example';
    quote.author = 'Example';
    callback(quote); // <====
  }, 4000);
};

...并使用回调的参数，例如：

getNewQuote(function(quote) {
    // Use quote here...
});

直播示例：

var getNewQuote = function(callback) {
  var quote = {};
  setTimeout(function() {
    quote.text = 'Example';
    quote.author = 'Example';
    callback(quote); // <====
  }, 1000);
};

getNewQuote(function(quote) {
    console.log("quote:", quote);
});