Question

我知道问题与$(document).ready(function() {});有关，或者我没有正确使用回调。

我正在尝试按此顺序运行getTotalMarketCap()，getAllOtherValues()和getMarketShare()，以便计算和展示市场份额。市场份额仅在60秒过后才在表格中更新。

以下是代码：https://codepen.io/anon/pen/wjYJgW

虽然我最初发布这篇文章来解决这个问题，但我可以做些什么改进以提高代码质量？

Answer 1

你可以试试这个：

// Formats numbers with commas.
String.prototype.commafy = function()
{
    return this.replace(/ (^|[^\w.])(\d{ 4,})/ g, function($0, $1, $2) {
        return $1 + $2.replace(/\d(?= (?:\d\d\d) + (? !\d))/ g, "$&,");
    });
};

/**
 * Rounds decimals.
 * @param {number} num - The number to round...
 * @param {number} scale - How many decimal places?
 */
function fixed (num, scale) {
  return (+(Math.round(+(num + "e" + scale)) + "e" + -scale)).toFixed(scale);
}

var totalCap;
var totalCapTemp;
var bitcoinPriceTemp;
var bccPriceTemp;
var bitcoinMarketCap;
var bccMarketCap;
var bitcoinMarketCapTemp;
var bccMarketCapTemp;
var bitcoinMarketShareTemp;
var bccMarketShareTemp;
var bitcoinMarketShare;
var bccMarketShare;
var bitcoinVolTemp;
var bccVolTemp;
var bitcoinChangeTemp;
var bccChangeTemp;
var bitcoinTxTemp;

var chart;
var myVar = setInterval(myTimer, 60000);

$(document).ready(function() {
    myTimer();
});

function myTimer()
{
    function runInOrder(callback)
    {
        getTotalMarketCap(function() {
            getAllOtherValues(function() {
                getMarketShare(callback);
            });
});
  }
  runInOrder(createChart);
}

function getTotalMarketCap(callback)
{
  $.getJSON("https://api.coinmarketcap.com/v1/global/", function(json) {
        totalCap = fixed (parseFloat(json.total_market_cap_usd / 1000000000), 2);
        if (!totalCapTemp || totalCapTemp == totalCap)
        {
      $("#totalCap")
        .text("$" + totalCap + "B")
        .removeClass();
        }
        else if (totalCap > totalCapTemp)
        {
      $("#totalCap")
        .text("$" + totalCap + "B")
        .removeClass()
        .addClass("green");
        }
        else
        {
      $("#totalCap")
        .text("$" + totalCap + "B")
        .removeClass()
        .addClass("red");
        }
        totalCapTemp = totalCap;
        callback();
    });

}

function getAllOtherValues(callback)
{

    var lastInstruction = function(){
    $.getJSON("https://api.blockchain.info/stats?cors=true", function(json) {
            bitcoinTx = json.n_tx.toLocaleString();
            if (!bitcoinTxTemp || bitcoinTxTemp == bitcoinTx)
            {
        $("#bitcoinTx")
          .text(bitcoinTx)
          .removeClass();
            }
            else if (parseInt(bitcoinTx) > parseInt(bitcoinTxTemp))
            {
        $("#bitcoinTx")
          .text(bitcoinTx)
          .removeClass()
          .addClass("green");
            }
            else
            {
        $("#bitcoinTx")
          .text(bitcoinTx)
          .removeClass()
          .addClass("red");
            }
            bitcoinTxTemp = bitcoinTx;
            callback();
        });
    };

  $.getJSON("https://api.coinmarketcap.com/v1/ticker/?limit=10", function(
    json
  ) {
    $.each(json, function(index, value) {
            if (value.id == "bitcoin")
            {
                bitcoinPrice = fixed (parseFloat(value.price_usd), 2);
                if (!bitcoinPriceTemp || bitcoinPriceTemp == bitcoinPrice)
                {
          $("#bitcoinPrice")
            .text("$" + bitcoinPrice.toLocaleString().commafy())
            .removeClass();
                }
                else if (bitcoinPrice > bitcoinPriceTemp)
                {
          $("#bitcoinPrice")
            .text("$" + bitcoinPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
                }
                else
                {
          $("#bitcoinPrice")
            .text("$" + bitcoinPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
                }
                bitcoinPriceTemp = parseFloat(bitcoinPrice);

                bitcoinVol = parseInt(value["24h_volume_usd"]);
                if (!bitcoinVolTemp || bitcoinVolTemp == bitcoinVol)
                {
          $("#bitcoinVol")
            .text("$" + bitcoinVol.toLocaleString().commafy())
            .removeClass();
                }
                else if (bitcoinVol > bitcoinVolTemp)
                {
          $("#bitcoinVol")
            .text("$" + bitcoinVol.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
                }
                else
                {
          $("#bitcoinVol")
            .text("$" + bitcoinVol.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
                }
                bitcoinVolTemp = parseInt(bitcoinVol);

                bitcoinChange = fixed (parseFloat(value.percent_change_24h), 2);
                if (!bitcoinChangeTemp || bitcoinChangeTemp == bitcoinChange)
                {
          $("#bitcoinChange")
            .text(bitcoinChange.commafy() + "%")
            .removeClass();
                }
                else if (parseFloat(bitcoinChange) > parseFloat(bitcoinChangeTemp))
                {
          $("#bitcoinChange")
            .text(bitcoinChange.commafy() + "%")
            .removeClass()
            .addClass("green");
                }
                else
                {
          $("#bitcoinChange")
            .text(bitcoinChange.commafy() + "%")
            .removeClass()
            .addClass("red");
                }
                bitcoinChangeTemp = bitcoinChange;

                bitcoinMarketCap = parseInt(value.market_cap_usd);
                if (!bitcoinMarketCapTemp)
                {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass();
                }
                else if (bitcoinMarketCapTemp == bitcoinMarketCap)
                {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass();
                }
                else if (bitcoinMarketCap > bitcoinMarketCapTemp)
                {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass()
            .addClass("green");
                }
                else
                {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass()
            .addClass("red");
                }
                bitcoinMarketCapTemp = bitcoinMarketCap;
            }

            if (value.id == "bitcoin-cash")
            {
                bccPrice = fixed (parseFloat(value.price_usd), 2);
                if (!bccPriceTemp || bccPriceTemp == bccPrice)
                {
          $("#bccPrice")
            .text("$" + bccPrice.toLocaleString().commafy())
            .removeClass();
                }
                else if (bccPrice > bccPriceTemp)
                {
          $("#bccPrice")
            .text("$" + bccPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
                }
                else
                {
          $("#bccPrice")
            .text("$" + bccPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
                }
                bccPriceTemp = parseFloat(bccPrice);

                bccVol = parseInt(value["24h_volume_usd"]);
                if (!bccVolTemp || bccVolTemp == bccVol)
                {
          $("#bccVol")
            .text("$" + bccVol.toLocaleString().commafy())
            .removeClass();
                }
                else if (bccVol > bccVolTemp)
                {
          $("#bccVol")
            .text("$" + bccVol.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
                }
                else
                {
          $("#bccVol")
            .text("$" + bccVol.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
                }
                bccVolTemp = parseInt(bccVol);

                bccChange = fixed (parseFloat(value.percent_change_24h), 2);
                if (!bccChangeTemp || bccChangeTemp == bccChange)
                {
          $("#bccChange")
            .text(bccChange.commafy() + "%")
            .removeClass();
                }
                else if (parseFloat(bccChange) > parseFloat(bccChangeTemp))
                {
          $("#bccChange")
            .text(bccChange.commafy() + "%")
            .removeClass()
            .addClass("green");
                }
                else
                {
          $("#bccChange")
            .text(bccChange.commafy() + "%")
            .removeClass()
            .addClass("red");
                }
                bccChangeTemp = bccChange;

                bccMarketCap = parseInt(value.market_cap_usd);
                if (!bccMarketCapTemp)
                {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass();
                }
                else if (bccMarketCapTemp == bccMarketCap)
                {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass();
                }
                else if (bccMarketCap > bccMarketCapTemp)
                {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass()
            .addClass("green");
                }
                else
                {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass()
            .addClass("red");
                }
                bccMarketCapTemp = bccMarketCap;
            }
            /// try (index >= json.length) if it doesn't work
            if (index >= json.length - 1)
                lastInstruction();

        });
    });


}

function getMarketShare(callback)
{
    bitcoinMarketShare = fixed (bitcoinMarketCap* 0.0000001 / totalCap, 2);
    if (!bitcoinMarketShareTemp || bitcoinMarketShareTemp == bitcoinMarketShare)
    {
    $("#bitcoinMarketShare")
      .text(bitcoinMarketShare + "%")
      .removeClass();
    }
    else if (bitcoinMarketShare > bitcoinMarketShareTemp)
    {
    $("#bitcoinMarketShare")
      .text(bitcoinMarketShare + "%")
      .removeClass()
      .addClass("green");
        chart.update();
    }
    else
    {
    $("#bitcoinMarketShare")
      .text(bitcoinMarketShare + "%")
      .removeClass()
      .addClass("red");
        chart.update();
    }
    bitcoinMarketShareTemp = bitcoinMarketShare;

    bccMarketShare = fixed (bccMarketCap* 0.0000001 / totalCap, 2);
    if (!bccMarketShareTemp || bccMarketShareTemp == bccMarketShare)
    {
    $("#bccMarketShare")
      .text(bccMarketShare + "%")
      .removeClass();
    }
    else if (bccMarketShare > bccMarketShareTemp)
    {
    $("#bccMarketShare")
      .text(bccMarketShare + "%")
      .removeClass()
      .addClass("green");
        chart.update();
    }
    else
    {
    $("#bccMarketShare")
      .text(bccMarketShare + "%")
      .removeClass()
      .addClass("red");
        chart.update();
    }
    bccMarketShareTemp = bccMarketShare;

    callback && callback();
}

function createChart()
{
  $(function() {
        Chart.defaults.global.legend.display = false;
        Chart.defaults.global.animation.duration = 0;
        var ctx = document.getElementById("myChart").getContext("2d");
    $("#myChart").css("background-color", "#222428");

        chart = new Chart(ctx, {
      // The type of chart we want to create
      type: "doughnut",

      // The data for our dataset
      data: {
        labels: ["Bitcoin", "Bitcoin Cash", "Others"],
        datasets: [
          {
            label: "dataset",
            backgroundColor: ["#2196f3", "#f44336", "#FFFFFF"],
            borderColor: "#000000",
            data: [
              bitcoinMarketShare,
              bccMarketShare,
              fixed (100 - bccMarketShare - bitcoinMarketShare, 2)
            ]
          }
        ]
      },

      // Configuration options go here
      options:
        {
        cutoutPercentage: 70,
        rotation: 185
      }
    });
});
}

您需要在$ .getJSON的成功处理程序

中调用回调

Answer 2

也许使用setTimeout？然后，您可以设置模式以刷新代码。

jQuery只上传第一页上加载的元素

2 个答案: