如果长度超过 x，Javascript 会再次绘制引号

Question

我有这段代码，它连接到一个 API 并从中抽取随机引用。

我想创建一个 if 语句，检查引号长度是否低于或等于 140 并返回它，或者如果更长，则再次绘制，但我不知道如何开始。

request = new XMLHttpRequest();
request.open("GET", "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=20", false);
request.send(); 
request = [].slice.call(JSON.parse(request.response));

var button = document.getElementById("button");
var authorname = document.getElementById("authorname");
var quotetext = document.getElementById("quotetext");
var drawnquote = request[Math.floor(Math.random() * request.length)].content;

button.addEventListener("click", function() {
  quotetext.innerHTML = request[Math.floor(Math.random() * request.length)].content;
  authorname.innerHTML = request[Math.floor(Math.random() * request.length)].title;  
});

我想到的是:

button.addEventListener("click", function() {
  if (drawnquote.length <= 140){
  quotetext.innerHTML = drawnquote;
  } else {

});

^ 这就是我的想法的结束。有人能给我指出正确的方向或提供建议吗？谢谢!

PS:如果可能的话，我正在尝试使用 vanilla js。

Answer 1

这里的核心问题是异步代码分支，这可能很棘手。我发现您还收到了一批报价(在您的示例中为 20 个)。这是个好主意，但如果您返回的 20 条引言全部超过 140 个字符怎么办？我们一开始只获取一个，然后我将向您展示如何通过获取多个来提高效率。您也没有正确使用XHTMLHttpRequest...您使用它就好像它同步操作一样，但事实并非如此。您必须添加一个事件监听器来处理响应。这是获取单引号的正确实现，功能化:

function getQuote(maxLength, cb) {
  const request = new XMLHttpRequest();
  request.addEventListener('load', function() {
    const resp = JSON.parse(this.responseText)
    cb(resp[0].content)
  })
  request.open("GET", "https://quotesondesign.com/wp-json/posts?" 
    + "filter[orderby]=rand&filter[posts_per_page]=1", false);
  request.send(); 
}

作为编者注，我可能会使用 Promise 来做到这一点，但由于我不确定 Promise 是否可供您使用，所以我只是使用回调。

无论长度如何，这都会得到一个单引号。你可以像这样使用它:

getQuote(140, function(quote) {
  console.log(quote)
})

现在让我们考虑一下如果第一个报价太长时获取另一个报价的问题。因为 Ajax 是异步的，所以您不能只编写一个循环。在这种情况下实现这一点的最简单方法是使函数递归:

function getQuote(maxLength, cb) {
  const request = new XMLHttpRequest();
  request.addEventListener('load', function() {
    // note that we're stripping out HTML -- probably don't want
    // to include that in the length
    const quote = JSON.parse(this.responseText)[0].content
      .replace(/<[^>]+\/>/g, '')
      .trim()
    // if it doesn't match our length requirements,
    // recursively call the function again
    if(quote.length > maxLength) return getQuote(maxLength, cb)
    cb(quote)
  })
  request.open("GET", "https://quotesondesign.com/wp-json/posts?"
    + "filter[orderby]=rand&filter[posts_per_page]=1", false);
  request.send(); 
}

到目前为止一切顺利...问题是，每次运行此程序时，我都会收到“超出最大调用堆栈大小”异常。这意味着它会循环查看 16,000 多个报价，而且它们都大于 140。因此，您所做的事情可能是徒劳的。但是，我们可以通过按请求获取更多报价来查看 320,000 个报价:

function getQuote(maxLength, cb) {
  const request = new XMLHttpRequest();
  request.addEventListener('load', function() {
    const quotes = JSON.parse(this.responseText)
    for(let quote of quotes) {
      quote = JSON.parse(this.responseText)[0].content
        .replace(/<[^>]+\/>/g, '')
        .trim()
      // we found a short quote!
      if(quote.length <= maxLength) return cb(quote)
    }
    // we didn't! have to recursively call the function again
    return getQuote(maxLength, cb)
  })
  request.open("GET", "https://quotesondesign.com/wp-json/posts?"
    + "filter[orderby]=rand&filter[posts_per_page]=20", false);
  request.send(); 
}

即使如此，我还是超出了最大调用堆栈大小。所以看起来这个特定的数据库没有太多(或任何)少于 140 个字符的引号...但至少您现在有了一个算法模板。