Javascript再次绘制引用，如果它'；它比x长

我有一段代码，它连接到一个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 {

});

按钮。addEventListener（“单击”，函数（）{
如果（DrawnNote.length在发送请求时，响应不会立即出现在下一条语句中，因为您有：

request.send(); 
request.response // will not necessarily be set

当您
send（）
请求成功时，它最终将触发一个“加载”事件。在调用
send（）
之前，您需要指定一个在加载事件触发时调用的偶数侦听器：

参见
中的更多示例发送请求时，响应不会立即出现在下一条语句中：

request.send(); 
request.response // will not necessarily be set

当您
send（）
请求成功时，它最终将触发一个“加载”事件。在调用
send（）
之前，您需要指定一个在加载事件触发时调用的偶数侦听器：

参见
上的更多示例这里的中心问题是使用异步代码进行分支，这可能很棘手。我看到您还得到了一批引号（示例中有20个引号）.这是一个好主意，但是如果您返回的20个引号都超过140个字符呢？我们将只获取一个引号，然后我将向您展示如何通过获取多个引号来提高效率。您也没有正确使用
xhtmlhtprequest
。。您使用它就像它是同步操作一样，而事实并非如此。您必须这样做添加一个事件侦听器以处理响应。下面是一个正确的实现，可以获得一个功能化的单引号：

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(); 
}

作为一篇社论，我可能会用承诺来做这件事，但因为我不确定承诺是否对你有效，所以我只是使用回调

这将得到一个单引号，无论长度如何。您可以这样使用它：

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(); 
}

函数getQuote（maxLength，cb）{
const request=new XMLHttpRequest（）；
request.addEventListener（'load'，function（））{
//请注意，我们正在剥离HTML——可能不希望
//包括在长度中
const quote=JSON.parse（this.responseText）[0]。内容
.替换（/]+\/>/g''）
.trim（）
//如果不符合我们的长度要求，
//再次递归调用该函数
if（quote.length>maxLength）返回getQuote（maxLength，cb）
cb（报价）
})
请求。打开（“获取”https://quotesondesign.com/wp-json/posts?"
+“filter[orderby]=rand&filter[posts\u per\u page]=1”，false）；
request.send（）；
}

到目前为止还不错…问题是，每次我运行此程序时，都会出现“超出最大调用堆栈大小”异常。这意味着它会循环使用16000个引号，并且它们都大于140。因此，您所做的可能是一件傻事。但是，我们可以通过每个请求获得更多引号来查看320000个引号：

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(); 
}

函数getQuote（maxLength，cb）{ const request=new XMLHttpRequest（）； request.addEventListener（'load'，function（））{ const quotes=JSON.parse（this.responseText） for（让我们引用引用）{ quote=JSON.parse（this.responseText）[0]。内容 .替换（/]+\/>/g''） .trim（） //我们找到了一个简短的报价！

---

if（quote.length这里的中心问题是使用异步代码进行分支，这可能很棘手。我看到您也得到了一批引号（在您的示例中为20个）.这是一个好主意，但是如果您返回的20个引号都超过140个字符呢？我们将只获取一个引号，然后我将向您展示如何通过获取多个引号来提高效率。您也没有正确使用

xhtmlhtprequest

。。您使用它就像它是同步操作一样，而事实并非如此。您必须这样做添加一个事件侦听器以处理响应。下面是一个正确的实现，可以获得一个功能化的单引号：

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(); 
}

作为一篇社论，我可能会用承诺来做这件事，但因为我不确定承诺是否对你有效，所以我只是使用回调

这将得到一个单引号，无论长度如何。您可以这样使用它：

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(); 
}

函数getQuote（maxLength，cb）{ const request=new XMLHttpRequest（）； request.addEventListener（'load'，function（））{ //请注意，我们正在剥离HTML——可能不希望 //包括在长度中 const quote=JSON.parse（this.responseText）[0]。内容 .替换（/]+\/>/g''） .trim（） //如果不符合我们的长度要求， //再次递归调用该函数 if（quote.length>maxLength）返回getQuote（maxLength，cb） cb（报价） }) 请求。打开（“获取”https://quotesondesign.com/wp-json/posts?" +“filter[orderby]=rand&filter[posts\u per\u page]=1”，false）； request.send（）； } 到目前为止还不错…问题是，每次我运行此程序时，都会出现“超出最大调用堆栈大小”异常。这意味着它会循环使用16000个引号，并且它们都大于140。因此，您所做的可能是一件傻事。但是，我们可以通过每个请求获得更多引号来查看320000个引号：

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(); 
}

函数getQuote（maxLength，cb）{ const request=new XMLHttpRequest（）； request.addEventListener（'load'，function（））{ const quotes=JSON.parse（this.responseText） for（让我们引用引用）{ quote=JSON.parse（this.responseText）[0]。内容 .替换（/]+\/>/g''）