利用异步Json请求/方法调用来加快页面加载速度 - javascript

我正在研究由4个信息框组成的数字标牌，按照目前的情况，我向控制器发出1个单个Json请求，以检索将在这些框中显示的数据。 action方法在数据库中查询信息，并调用4个单独的私有方法，提供查询信息以填充要作为json返回到视图的列表。

下面提供了示例代码。

我的问题是，如何通过控制器侧的多线程或对4个独立操作方法的4个单独的Json请求来异步完成此操作。

当前控制器更改方法：

public ActionResult Change()
{

  Dictionary<string, int> model = new Dictionary<string, int>();

  var q1 = db.getData1();
  var q2 = db.getData2();
  var q3 = db.getData3();
  var q4 = db.getData4();


  var content = GetEfficiencyValues(q1, q2, q3);
  model.Add("currEff", content[0]);
  model.Add("prevEff", content[1]);
  model.Add("otherEff", content[2]);

  content = GetProductivityValues(q1, q2, q4);
  model.Add("currProd", content[0]);
  model.Add("prevProd", content[1]);
  model.Add("otherProd", content[2]);

  Content = GetSlowStartValues(q1, q2, q3, q4);
  model.Add("currAvg", content[0]);
  model.Add("prevAvg", content[1]);
  model.Add("otherAvg", content[2]);

  //adding WIP content for the box
  content = GetNotSwipedInCount(q1, q2);
  model.Add("WIP", content[0]);
  model.Add("total", content[1]);

  return Json(model, JsonRequestBehavior.AllowGet);
}

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

var dataList = [{}];

function getData() {

  dataList = [{}];
  var getData = '@Url.Action("Change")';

  //get json from controller (DigitalSignage/Change)
  $.getJSON(getData, function(data) {
    dataList = data;

    changeData();
  });
}

function changeData() {

  //refreshing efficiency data
  createGauge(dataList.currEff, "#g1")
  $("#eff1").text(dataList.currEff + "%");
  $("#eff2").text(dataList.prevEff + "%");
  $("#eff3").text(dataList.otherEff + "%");

  //refreshing the production data
  createGauge(dataList.currProd, "#g2")
  $("#prod1").text(dataList.currProd + "%");
  $("#prod2").text(dataList.prevProd + "%");
  $("#prod3").text(dataList.otherProd + "%");

  //refreshing the average data
  $("#avg1").text(dataList.currAvg + " mins");
  $("#avg2").text(dataList.prevAvg + " mins");
  $("#avg3").text(dataList.otherAvg + " mins");

  //refreshing the content of the WIP box
  $("#wip").text(dataList.WIP);
  $("#attend").text("of " + dataList.total);


  //loop back in 5 minutes
  window.setInterval(getData, 300000);

}

<style>body {
  background-color: #444444;
  display: none;
}

i {
  color: white;
}

.fa {
  font-size: 2.5em;
}

.info-section {
  background-color: #232323;
  border-radius: 16px;
  padding: 25px;
  margin: 5px auto;
  max-width: 560px;
  min-height: 430px;
}

.info-section h1,h2,h3,h4,h5,h6 {
  color: white;
  text-align: center;
  margin: 0px;
}

.info-section > div {
  border: 1px solid white;
}

.legend {
  display: inline-block;
  border-radius: 3px;
  border: 0px;
  margin: 0px 2px;
  font-weight: bold;
  font-size: 1em;
}

.result-text {
  text-align: center;
  font-size: 45px;
  padding: 15px 0px;
  margin: 0px;
  color: white;
}

.gauge-val {
  color: white;
  font-size: 40px;
  position: relative;
  left: 100px;
  bottom: 45px;
}

.gauge {
  margin: auto;
}

#g1,
#g2,
.gauge-container {
  width: 180px;
  margin: auto;
}

</style>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <link rel="stylesheet" href="~/Content/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="row">
  <p id="time-stamp" style="float:right; color:white; padding: 15px 30px 0;">Last Updated:</p>
</div>
<div class="row">
  <!-- Efficiency Stats Block-->
  <div class="col-sm-6">
    <div class="info-section">

      <h1>Efficiency</h1>

      <div class="row" style="border: 1px solid white; margin-left: 0px; margin-right: 0px;">

        <div class="col-sm-6 today" style="border-right: 1px solid white; padding:0px;">
          <h3>Current</h3>
          <div class="gauge-container">
            <div class="gauge" id="g1"></div>
            <div id="eff1" class="gauge-val percent"></div>
          </div>
          <i class="fa "></i>
        </div>

        <div class="col-sm-6 yesterday" style=" padding:0px;">
          <div style=" border-bottom: 1px solid white;">
            <h3>Yesterday</h3>
            <p id="eff2" class="result-text percent"></p>
            <i class="fa "></i>
          </div>
          <div>
            <h3>Yesterday</h3>
            <p id="eff3" class="result-text percent">84%</p>
            <i class="fa "></i>
          </div>
        </div>

      </div>
      <div style="border:0px; margin:auto; float:right; margin:5px;">
        <div class="legend" style="background-color:#ff3823; ">0% - 75%</div>
        <div class="legend" style="background-color:#f4eb49; ">75% - 82%</div>
        <div class="legend" style="background-color:#72bb53; ">83% - 100%</div>
      </div>
    </div>
  </div>
  <!-- Task Card productivity Block-->
  <div class="col-sm-6">
    <div class="info-section">
      <h1>Task Card Productivity</h1>
      <div class="row " style="border: 1px solid white;  margin-left: 0px; margin-right: 0px;">
        <div class="col-sm-6 today" style="border-right: 1px solid white; padding:0px;">
          <h3>Current</h3>
          <div class="gauge-container">
            <div class="gauge" id="g2"></div>
            <div id="prod1" class="gauge-val percent"></div>
          </div>
          <i class="fa "></i>
        </div>

        <div class="col-sm-6 yesterday" style=" padding:0px;">
          <div style=" border-bottom: 1px solid white;">
            <h3>Yesterday</h3>
            <p id="prod2" class="result-text percent"></p>
            <i class="fa "></i>
          </div>
          <div>
            <h3>Yesterday</h3>
            <p id="prod3" class="result-text percent"></p>
            <i class="fa "></i>
          </div>
        </div>
      </div>
      <div style="border:0px; float:right; margin:5px;">
        <div class="legend" style="background-color: #ff3823;">0% - 75%</div>
        <div class="legend" style="background-color: #f4eb49;">75% - 82%</div>
        <div class="legend" style="background-color: #72bb53;">83% - 100%</div>
      </div>
    </div>
  </div>
  <!-- Slow Start average Block-->
  <div class="col-sm-6">
    <div class="info-section">
      <h1>Slow Start Average</h1>
      <div class="row" style="border: 1px solid white;  margin-left: 0px; margin-right: 0px;">
        <div class="col-sm-6 today" style="padding:0px;">
          <h3>Current</h3>
          <p id="avg1" class="result-text minute" style=" font-size: 3.5em; padding:70px 0px;"></p>
          <i class="fa "></i>
        </div>
        <div class="col-sm-6 yesterday" style="border-left: 1px solid white; padding:0px;">
          <div style=" border-bottom: 1px solid white;">
            <h3>Yesterday</h3>
            <p id="avg2" class="result-text minute"></p>
            <i class="fa "></i>
          </div>
          <div>
            <h3>Yesterday</h3>
            <p id="avg3" class="result-text minute"></p>
            <i class="fa "></i>
          </div>
        </div>
      </div>
      <div style="border:0px; float:right; margin:5px;">
        <div class="legend" style="background-color: #ff3823;"> 0 - 15 minutes </div>
        <div class="legend" style="background-color: #72bb53;"> 15 - &infin; minutes </div>
      </div>
    </div>
  </div>
  <!-- Not Swiped into Trax Block-->
  <div class="col-sm-6">
    <div class="info-section">
      <h1>Not Swiped Into Trax</h1>
      <div class="row " style="border: 1px solid white;  margin-left: 0px; margin-right: 0px;">
        <h1>Current</h1>
        <p id="wip" class="result-text " style="font-size:155px;"> </p>
        <h1 id="attend">of 50</h1>
      </div>
    </div>
  </div>
</div>
</body>

javascript参考方案

这是您要找的东西吗？我对其进行了编辑，以包括一个简单的查询缓存。

public class QueryCache
{
    private static QueryCache _instance; 
    private TypeOfQ1 _q1;
    private TypeOfQ2 _q2;
    private TypeOfQ3 _q3;
    private TypeOfQ4 _q4;

    protected QueryCache() {}

    public QueryCache Instance()
    {
        if (_instance == null)
            _instance = new QueryCache();
        return _instance
    }

    public Invalidate()
    {
        _instance = null;
    }

    public TypeOfQ1 Q1 
    {
        get
        {
            if (_q1 == null)
                _q1 = db.getData1();
            return _q1;
        }
    }

    public TypeOfQ2 Q2 
    {
        get
        {
            if (_q2 == null)
                _q2 = db.getData2();
            return _q2;
        }
    }

    public TypeOfQ3 Q3 
    {
        get
        {
            if (_q3 == null)
                _q3 = db.getData3();
            return _q3;
        }
    }

    public TypeOfQ4 Q4 
    {
        get
        {
            if (_q4 == null)
                _q4 = db.getData4();
            return _q4;
        }
    }
}

public async Task<ActionResult> GetEfficiencyValuesAsync()
{
  QueryCache qc = QueryCache.Instance();
  Dictionary<string, int> model = new Dictionary<string, int>();

  var q1 = qc.Q1;
  var q2 = qc.Q2;
  var q3 = qc.Q3;

  var content = GetEfficiencyValues(q1, q2, q3);
  model.Add("currEff", content[0]);
  model.Add("prevEff", content[1]);
  model.Add("otherEff", content[2]);

  return await Task.Run(() => Json(model, JsonRequestBehavior.AllowGet));
}

public async Task<ActionResult> GetProductivityValuesAsync()
{
  QueryCache qc = QueryCache.Instance();
  Dictionary<string, int> model = new Dictionary<string, int>();

  var q1 = qc.Q1;
  var q2 = qc.Q2;
  var q4 = qc.Q4;

  content = GetProductivityValues(q1, q2, q4);
  model.Add("currProd", content[0]);
  model.Add("prevProd", content[1]);
  model.Add("otherProd", content[2]);

  return await Task.Run(() => Json(model, JsonRequestBehavior.AllowGet));
}

public async Task<ActionResult> GetProductivityValuesAsync()
{
  QueryCache qc = QueryCache.Instance();
  Dictionary<string, int> model = new Dictionary<string, int>();

  var q1 = qc.Q1;
  var q2 = qc.Q2;
  var q3 = qc.Q3;
  var q4 = qc.Q4;

  Content = GetSlowStartValues(q1, q2, q3, q4);
  model.Add("currAvg", content[0]);
  model.Add("prevAvg", content[1]);
  model.Add("otherAvg", content[2]);

  return await Task.Run(() => Json(model, JsonRequestBehavior.AllowGet));
}

public async Task<ActionResult> GetProductivityValuesAsync()
{
  QueryCache qc = QueryCache.Instance();
  Dictionary<string, int> model = new Dictionary<string, int>();

  var q1 = qc.Q1;
  var q2 = qc.Q2;
  qc.Invalidate();

  //adding WIP content for the box
  content = GetNotSwipedInCount(q1, q2);
  model.Add("WIP", content[0]);
  model.Add("total", content[1]);

  return await Task.Run(() => Json(model, JsonRequestBehavior.AllowGet));
}

PHP stringID无法从回显中读入onclick - javascript

我有一个音频播放器，可以在HTML中正常工作，但是当我从PHP回显调用时，似乎没有得到div ID的名称，因此它无法播放我的音频。这是我的代码：// Show audio if ($sObj->get('audio') != null) { $sAudio = $sObj->get('audio'); $a…

在php中单击按钮添加表行并设置字段值 - javascript

我有一个表单，必须在单击按钮时添加表行。这是我必须动态添加的表行：（addProdToGroup.php）<tr style="text-align: center;" id="products"> <td><?php $j ?></td> <td><s…

如果复选框切换复选框已选中，则在切换div中输入必填字段 - javascript

我使用脚本用JavaScript切换了一些div。如果要选中复选框以显示toogle div，我想在toogle div中设置一些“必填”输入字段。有人能弄清楚吗？那是工作吗？function show(id) { if(document.getElementById) { var mydiv = document.getElementById(id); m…

淘汰赛在金字塔中的行为不正确 - javascript

我正在使用Pyramid构建一个Webapp，但是Knockout的行为有所不同。我有一个表格： <div data-bind="with: $root.itemToAdd" style="display: none;"> <form data-bind="submit: $root.add…

将简单的javascript代码转换为c＃ - javascript

昨天我在这里问了一个问题。使用javascript和html解决方案很简单前一阵子我打算什么是操纵html来执行javascript中的任务但是我改变了主意，将javascript代码重写为c＃这是输入<Abstract> <Heading>Abstract</Heading> <Para TextBreak=�…

推荐标签：, , ,

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在看。自己强行看了两个月，全部给看完了。感觉这文笔也就我读初中的水平……而且写着国内的一些情况，外国人能理解吗？这书为什么会这么火？这水平我也可以去写呀[笑哭][笑哭][笑哭] 招商银行员工：可以写赶紧写一个啊，能拿科幻文学雨果奖。 包清白：哦 楼主：pei ！tui ！你也配姓龙 楼主：@赵龙王 呵呵 […]