데이터를 표시 할 때 루프 프로세스 지연

Question

for 루프 프로세스를 지연하여 데이터 로딩이 진행률 막대처럼 보이도록하고 싶습니다. 이 코드에서 버튼을 클릭하면 바로 다음 데이터가 표시됩니다. 20/20 레코드 렌더링. 1/20 Record Rendered로 시작하는 레코드를보고 싶습니다. 3 초 후 Renderered 2/20 레코드가됩니다.

<button name="subject" type="submit" value="6" onClick="Run(this.value)">Run</button> 
<script> 
     function Run(value) { 
      custRecordsRendered = 0; 
      $.ajax({ 
       type: 'Post', 
       url: "/Tasks/RunSample", 
       success: function (data) { 
        totalRecords = data[0].Total; 
        console.log("Total: " + data[0].Total); 
        console.log("Records: " + Object.keys(data).length); 
        for (var key in data) { 
         (function iterator() { 
          console.log("logs: "+data[key].Records); 
          setTimeout(iterator, 3000); 
         })(); 

         if (data.hasOwnProperty(key)) { 
          custRecordsRendered = data[key].Records; 
          updateProgress(); 
         } 
        }      
       } 
      }); 
      function updateProgress() { 
       $("#completeCount").text(custRecordsRendered + "/" + totalRecords + " Records Rendered"); 
      } 
     } 
    </script> 

컨트롤러 :

public JsonResult RunSample() 
    { 
     List<object> countData = new List<object>(); 

     int count = 20; 
     for (int i = 1; i <= count; i++) 
     { 
      countData.Add(new { Total = count, Records = i }); 

     } 
     return Json(countData); 
    } 

이 도와 주셔서 감사 여기

는 코드입니다.

Answer 1

것은 당신이 ..이 코드는 잠을 스레드가 발생 것처럼 당신이의 setTimeout 기능을 처리하는 코드에서

function Run(value) { 
     custRecordsRendered = 0; 
     $.ajax({ 
      type: 'Post', 
      url: "/Home/RunSample", 
      success: function (data) { 

       totalRecords = data[0].Total; 
       console.log("Total: " + data[0].Total); 
       console.log("Records: " + Object.keys(data).length); 
       var itemCount = 0; 
       var progressInterval = setInterval(function() { 
        if (itemCount < data.length) { 
         console.log(itemCount); 
         console.log("logs: " + data[itemCount].Records); 
         custRecordsRendered = data[itemCount].Records; 
         updateProgress(); 
         itemCount++; 
        } 
        else { 
         clearInterval(progressInterval); 
        } 
       }, 500); 

      } 
     }); 
     function updateProgress() { 
      $("#completeCount").text(custRecordsRendered + "/" + totalRecords + " Records Rendered"); 
     } 
    } 

을 트릭을 할 수 있습니다 정확히 무엇을 의미하는지 가지고 있지만 실제로는 그렇지 무엇을 않는 경우 지정된 간격 후에 실행되고 처리기 함수를 실행하는 지연된 비동기 이벤트를 설정하지만 setTimeout 호출 이후의 코드 실행이 계속됩니다. 따라서 setInterval이 목적을 달성 할 것입니다