JS+WCF는 진행률 표시줄 기능을 구현합니다.

이 글에서는 데이터 로딩량을 실시간으로 모니터링하기 위한 진행률 표시줄을 구현하는 JS+WCF 방법을 주로 소개합니다. 실제 예제를 결합하여 프런트엔드 js의 관련 작업 기술과 백그라운드 WCF 상호 작용을 분석합니다. 많은 양의 데이터를 가져오는 동안 로딩 진행 상황을 실시간으로 표시합니다. 다음으로, 모두에게 도움이 되기를 바랍니다.

Background

프로젝트에서 Memcache로 많은 양의 데이터를 가져와야 하기 때문입니다

110,000개의 데이터를 검색하려면 WCF를 사용해야 하는데 거기에서 다단계 쿼리와 정렬이 이루어지기 때문입니다. 상대적으로 느립니다(약 1분)

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

간단히 , 데이터 가져오기 완료까지 약 1분 30초 정도 소요됩니다

이때, 완료된 데이터의 양을 실시간으로 모니터링하기 위한 진행바가 필요합니다

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

기능

1 데이터 로드 및 처리를 위한 스레드 열기
2. 실시간으로 배경 데이터를 저장하고

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

백엔드를 표시합니다.

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

문제 및 해결 방법

1. 진행률 표시줄 생성

해결 방법: 온라인 데모를 사용하세요. c ss+js는 동적으로 생성될 수 있습니다. 데이터만 변경하세요.

2. 스레드 문제

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

3. 실시간 모니터링 문제

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

4. Ajax 오류 보고 문제

반환 값의 유형과 상황에 따라 달라지는 result 또는 result.d인지 주의하세요

5. 데이터 유형 문제

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

Summary

원래는 스레드를 열고, 변수를 추가하고, 프론트 데스크로 돌아가고, 진행률 표시줄을 추가하고, 변수를 읽으면 괜찮을 거라고 생각했어요하지만 이 MVC , 이번 봄, 중간에 이 인터페이스, 이전에 다양한 방법은 사용하기 쉽지 않으며 그 아래의 작업도 ajax... 하나씩 해결하고 마침내 해결됩니다

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

또한 프레임워크와 협력은 편리함을 가져오는 반면, 중간 제한과 버그는 효율성을 감소시킵니다.

관련 권장 사항:

진행률 표시줄을 구현하는 JavaScript 기본 코드

진행률 표시줄을 표시하기 위한 대용량 파일의 JS 기본 업로드 - PHP 파일 업로드

php의 진행률 표시줄 기능 분석 예

위 내용은 JS+WCF는 진행률 표시줄 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!