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

标签 javascript c# json asp.net-mvc

我正在开发由 4 个信息框组成的数字标牌，目前我向 Controller 发出 1 个 Json 请求，以检索将在框中显示的数据。该操作方法在数据库中查询信息并调用 4 个单独的私有(private)方法，提供查询信息来填充要以 json 形式返回到 View 的列表。

下面提供了示例代码。

我的问题是，如何异步完成此操作，无论是 Controller 端的多线程，还是对 4 个单独操作方法的 4 个单独的 Json 请求。

当前 Controller 更改方法:

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>

最佳答案

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

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

关于javascript - 利用异步 Json 请求/方法调用来加快页面加载速度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44828420/

上一篇：javascript - 如何防止提交时刷新但又实际提交表单？

下一篇：javascript - 对 React Components 的流类型感到困惑

相关文章：

c# - 如何从 List<int> 中获取重复次数

ios - 快速解析Json数据

javascript - React getDerivedStateFromProps() 的使用

javascript - 仅在特定屏幕尺寸上运行 jquery？

javascript - V-for 迭代破坏了样式

javascript - JQuery 克隆和 Onchange 事件

c# - 如何使 EF 使用字符串连接构建更新 SQL？

c# - Unity找不到其他DLL的DLL依赖关系(均在Assets文件夹中)

javascript - 使用 javascript 将对象绑定(bind)到模板

json - 是什么导致 JavaScript 结构在实时版本中失败但在测试中有效？

©2024 IT工具网  联系我们