JS+WCF implements progress bar function

This article mainly introduces the method of JS+WCF to realize the progress bar to monitor the data loading amount in real time, and analyzes the related 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 in the form of examples. Friends who need it You can refer to it, I hope it can help everyone.

Background

Since the project needs to import a large amount of data into memcache

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

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

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

At this time, a progress bar is needed to monitor the completed data amount in real time

(before I am using a dynamic graph, so I cannot 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 the

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

Backend

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 be dynamically generated, and just change the data

2. Threading problem

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

3. Real-time monitoring problem

Solution: The thread used for data processing Run automatically, the frontend uses ajax to continuously query a variable load_data_amount in the background

##4.ajax error problem

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

5. Data type problem

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

Summary

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

But the MVC in the middle, this Spring, this interface, and the previous method Various difficulties, as well as the operations under them, ajax... were solved one by one, and finally solved it

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

In addition, framework and cooperation While it brings convenience, the limitations and bugs in the middle will also reduce your efficiency.

Related recommendations:

JavaScript native code to implement progress bar

##JS native upload large file display progress bar-php upload file

Example analysis of progress bar function in php

The above is the detailed content of JS+WCF implements progress bar function. For more information, please follow other related articles on the PHP Chinese website!