Javascript API中的随机代码生成器-变量在代码中不起作用？

我已经建立了一个随机报价生成器网站。它从forismatic获取引用，并有一个按钮来获取新引用，还有一个按钮来推特引用。当它得到一个新的报价，网站的颜色变化

我是JavaScript的初学者，正在寻找有关我的代码的任何提示，以及以下问题的答案。我使用变量“request”从forismatic API获取JSON。正如您在下面看到的，我需要重新编写变量请求中的实际代码，以使网站正常工作。我想知道是否有人能解释原因。多谢各位

这项工作：

// initialize JSON request as a variable
var request =
$.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) {

var words = '“' + json.quoteText;

var author = '--' + json.quoteAuthor;

// update quote and author
$(".quote").html(words);
$(".author").html(author);

// update Tweet link
$("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author);

// randomize background color variables
var i = Math.floor(Math.random() * 10 % 7);
var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c'];

// change color of each element, with fade
$("body").animate({"background-color": colors[i]}, 1000);
$(".btn-primary").animate({"background-color": colors[i]}, 1000);
$(".quote").animate({"color": colors[i]}, 1000);
$(".author").animate({"color": colors[i]}, 1000);
$(".btn-social-icon").animate({"background-color": colors[i]}, 1000);
});


// use request to populate a quote upon page opening
$(document).ready(function(request) {
  $("#btn-quote").on("click", function() {  

    // identical to request variable but needs to be repasted to work upon clicks
    $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) {

    var words = '“' + json.quoteText;

    var author = '--' + json.quoteAuthor;

    // update quote and author
    $(".quote").html(words);
    $(".author").html(author);

    // update Tweet link
    $("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author);

    // randomize background color variables
    var i = Math.floor(Math.random() * 10 % 7);
    var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c'];

    // change color of each element, with fade
    $("body").animate({"background-color": colors[i]}, 1000);
    $(".btn-primary").animate({"background-color": colors[i]}, 1000);
    $(".quote").animate({"color": colors[i]}, 1000);
    $(".author").animate({"color": colors[i]}, 1000);
    $(".btn-social-icon").animate({"background-color": colors[i]}, 1000);
        });
      });
    });

这并没有（页面加载时引用加载，但单击时不更新）唯一的区别是代码底部的“$（document）.ready”

// initialize JSON request as a variable
var request =
$.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) {

  var words = '“' + json.quoteText;

  var author = '--' + json.quoteAuthor;

  // update quote and author
  $(".quote").html(words);
  $(".author").html(author);

  // update Tweet link
  $("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author);

  // randomize background color variables
  var i = Math.floor(Math.random() * 10 % 7);
  var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c'];

  // change color of each element, with fade
  $("body").animate({"background-color": colors[i]}, 1000);
  $(".btn-primary").animate({"background-color": colors[i]}, 1000);
  $(".quote").animate({"color": colors[i]}, 1000);
  $(".author").animate({"color": colors[i]}, 1000);
  $(".btn-social-icon").animate({"background-color": colors[i]}, 1000);
      });


  // use request to populate a quote upon page opening
  $(document).ready(function(request) {
  $("#btn-quote").on("click", function(request) {  
  request;
    });
  });

---

考虑将请求设置为函数而不是变量：

// initialize JSON request as a variable
function request() {
    $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) {

        var words = '“' + json.quoteText;

        var author = '--' + json.quoteAuthor;

        // update quote and author
        $(".quote").html(words);
        $(".author").html(author);

        // update Tweet link
        $("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author);

        // randomize background color variables
        var i = Math.floor(Math.random() * 10 % 7);
        var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c'];

        // change color of each element, with fade
        $("body").animate({"background-color": colors[i]}, 1000);
        $(".btn-primary").animate({"background-color": colors[i]}, 1000);
        $(".quote").animate({"color": colors[i]}, 1000);
        $(".author").animate({"color": colors[i]}, 1000);
        $(".btn-social-icon").animate({"background-color": colors[i]}, 1000);
    });
}


// use request to populate a quote upon page opening
$(document).ready(function() {
    $("#btn-quote").on("click", request);
});

---

谢谢，这很有效。如果你回答这个问题，我会给你一个+1