How to monitor data loading in JS+WCF

This article mainly introduces the method of JS WCF to realize the progress bar to monitor the data loading amount in real time. It combines the example form to analyze the relevant operation skills of the interaction between the front-end js and the background WCF in the process of importing a large amount of data to realize the real-time display of the loading progress, which is required. Friends can refer to the following

The example of this article describes the method of JS WCF realizing the progress bar to monitor the data loading amount in real time. Share it with everyone for your reference, the details are as follows:

Background

Due to the need to import a large amount of data into memcache in the project

Need to use WCF to retrieve 110,000 pieces of data. Due to the multi-level query and sorting there, it is relatively slow (about 1 minute)

At the same time, the data needs to be processed here and merged into 20,000 pieces of data. , and then storage, which takes a certain amount of time (also about 1 minute)

In short, it takes about 1 minute and 30 seconds to complete the data import

At this time, a progress bar is needed to monitor the completion in real time Amount of data

(I used a dynamic graph before, so I can’t know the current completion amount of the program, or even whether it is stuck, I can only wait)

Function

1. Open a thread for loading data and processing data
2. The front desk reads the background data in real time and displays

Code

view-html

@* 数据准备进度条 *@
  <p id="container">
    <p class="content">
      <h1>数据准备</h1>
    </p>
    <!-- Progress bar -->
    <p id="progress_bar" class="ui-progress-bar ui-container">
      <p class="ui-progress" style="width: 3%;">
        <span class="ui-label" style="display: none;">完成量<b class="value">3%</b></span>
      </p>
    </p>
    <!-- /Progress bar -->
    <p class="content" id="main_content" style="display: none;">
      <p>数据准备完成！</p>
    </p>
  </p>

view-js

$(function () {
    $('#initialization').click(function () {
      $.messager.confirm('提示', '是否要进行数据初始化？', function (r) {
        if (!r) {
          return;
        }
        else {
          $('#container').show();
          var t1 = window.setInterval(process_bar, 1500);
        }
      });
    });
});
function process_bar() {
    $.ajax({
      type: "POST",
      async: true,
      url: "/Paper/LoadData",
      success: function (result) {
        $('#progress_bar .ui-progress').animateProgress(result);
        if (result =="100") {
          $('#main_content').slideDown();
          $('#fork_me').fadeIn();
          setTimeout(function () { $('#container').hide();; }, 1500);
          window.clearInterval(t1);
        }
      }
    })
}

controller

static bool flag = true;
public int LoadData()
{
  int result = Ipaperbll.LoadDataAmount();
  if (flag)
  {
    Thread thread = new Thread(new ThreadStart(ThreadLoadData));
    thread.Start();
    flag = false;
  }
  return result;
}
private void ThreadLoadData()
{
  Ipaperbll.initializeData();
}

Background

static int load_data_amount;//当前数据准备量
public bool initializeData()
{
  bool flag = false;  //定义返回值
  //获得数据
  //code....code ....code....
  load_data_amount = 5;//完成工作量
  int page = 0;
  int amount = 50000;//一次获取数据量不能超过10万
  while (page * amount == list.Count)
  {
    //code....code ....code....
    load_data_amount = load_data_amount + 5;
  }
  load_data_amount = 50;//读取数据默认的工作量
  double totalamount = list.Count();
  foreach (var item in list)
  {
    //code....code ....code....
    load_data_amount = Convert.ToInt32((1 - (totalamount--) / double.Parse(list.Count().ToString())) * 50) + 50;//根据数据改变的完成工作量
  }
  load_data_amount = 100;//完成工作量
  flag = true;
  return flag;
}
//返回当前准备数据量
public int LoadDataAmount() {
  return load_data_amount;
}

Problems & Solutions

##1. Progress bar generation

Solution: Use the online demo, css js can Dynamically generated, just change the data

2. Thread problem

Solution: At first, the thread was used for monitoring, and later it was changed to the thread used for data processing

3. Real-time monitoring problem

Solution: Process data using threads to run automatically, and the front desk uses ajax to continuously query a variable load_data_amount in the background

4.ajax error reporting problem

Pay attention to the type of return value, and whether it is result or result.d, which is different in different situations

5. Data type issues

Solution: The percentage of completion of reading data is obtained by using the completion amount/all amounts. The number here is always wrong because the int type cannot withstand the operation of 110,000 and subsequent decimals. Use double and float can

Summary

I originally thought of opening a thread, adding a variable, returning to the front desk, adding a progress bar, and reading the variable. OK

But the MVC in the middle, this Spring, this interface, the previous methods were all difficult to use, and the operations under them, ajax... were solved one by one, and finally solved

Divide and conquer, solve them one by one, and just test

In addition, while frameworks and cooperation bring convenience, the limitations and bugs in the middle will also reduce your efficiency

The above is I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to use jQuery to solve the problem that dynamically added elements cannot trigger binding events

How to get Excel content in Node

How to send requests to the intermediate service layer in node (detailed tutorial)

The above is the detailed content of How to monitor data loading in JS+WCF. For more information, please follow other related articles on the PHP Chinese website!