JS+WCF에서 데이터 로딩을 모니터링하는 방법

이 글에서는 데이터 로딩량을 실시간으로 모니터링하기 위한 진행률 표시줄을 구현하는 JS+WCF 방법을 주로 소개합니다. 실제 예제를 결합하여 프런트엔드 js의 관련 작업 기술과 배경 WCF 상호 작용을 분석합니다. 대용량 데이터를 가져오는 과정에서 로딩 진행 상황을 실시간으로 표시해 주는 것이 필요한 친구들은 다음을 참고하시면 됩니다

본 글의 예시에서는 JS+WCF로 진행률 표시줄을 구현하는 방법을 설명하고 있습니다. 데이터 로딩량을 실시간으로 모니터링하세요. 참고용으로 모두와 공유하세요. 세부 사항은 다음과 같습니다.

Background

프로젝트에서 Memcache로 대량의 데이터를 가져와야 하기 때문에

110,000을 검색하려면 WCF를 사용해야 합니다. 다단계 조인트 쿼리 및 정렬로 인해 데이터가 상대적으로 느립니다(약 1분)

동시에 여기에서 데이터를 처리하고 20,000개의 데이터로 병합한 다음 저장되는데 일정 시간(역시 약 1분)이 소요됩니다

요컨대 이 데이터 가져오기를 완료하는 데 총 1분이 소요됩니다. 약 30초가 소요됩니다

이때 진행 상황을 모니터링하려면 진행률 표시줄이 필요합니다. 완료된 데이터의 양을 실시간으로

(이전에는 동적 그래프를 사용했기 때문에 현재 프로그램의 완료 양을 알 수 없었거나, 멈춰 있는지도 그냥 기다릴 수 있었습니다)

Function

1. 데이터 로딩 및 처리를 위한 스레드 열기
2. 프론트 데스크는 백그라운드 데이터를 실시간으로 읽고

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. 진행률 표시줄 생성

해결책: 온라인 데모를 사용하세요. CSS+JS는 데이터를 동적으로 생성하고 변경할 수 있습니다. 그게 전부입니다

2. 스레드 문제

해결 방법: 처음에는 스레드를 모니터링하는 데 사용되다가 나중에 스레드를 사용하여 데이터를 처리하도록 변경되었습니다

3. 실시간 모니터링 문제

해결 방법: 데이터를 처리하는 데 사용되는 스레드가 실행됩니다. 자동으로 프론트 데스크에서 ajax가 사용됩니다. 백그라운드에서 load_data_amount 변수를 지속적으로 쿼리합니다

4. Ajax 오류 보고 문제

반환 값의 유형과 result 또는 result.d인지 주의하세요. 상황마다 다릅니다

5. 데이터 유형 문제

해결 방법: 데이터 읽기 완료율은 완료 금액/전체 금액을 사용하여 구합니다. 여기서 숫자는 int 유형이 견딜 수 없기 때문에 항상 잘못됩니다. 110,000 이하의 소수점 연산을 사용할 수 있습니다

Summary

원래는 스레드를 열고, 변수를 추가하고, 프론트 데스크로 돌아가서 진행률 표시줄을 추가하고, 변수를 읽어올 생각이었습니다. 괜찮았는데

그런데 그 중간에 이번 MVC, 이번 Spring, 이번 인터페이스, 그리고 이전 방식의 여러 불편한 점들과 그 아래의 연산들, ajax... 하나하나 해결하고 드디어 해결했습니다

분할해서 정복하고, 하나씩 해결하고, 테스트해보세요

또한 프레임워크와 협력은 편리함을 가져오지만, 중간의 한계와 버그는 효율성을 떨어뜨리기도 합니다. 위의 내용이 여러분에게 도움이 되기를 바랍니다. 앞으로도 다들.

관련 기사:

동적으로 추가된 요소가 바인딩 이벤트를 트리거할 수 없는 문제를 해결하기 위해 jQuery를 사용하는 방법

Node에서 Excel 콘텐츠를 가져오는 방법

노드의 중간 서비스 계층에 요청을 보내는 방법 (자세한 튜토리얼)

위 내용은 JS+WCF에서 데이터 로딩을 모니터링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!