새 AJAX 호출마다 이전 호출보다 약간 더 시간이 걸립니다.

Question

ajax 호출로 일부 데이터를 변경하려고 시도하지만 모든 새 호출이 이전 호출보다 약간 더 시간이 걸리는 것이 문제입니다.

그래서 10-15 회 호출 후, ajax 요청이 시작되고 ajax가 데이터를 리턴 할 때까지의 시간은 요청 당 20 초와 같습니다.

또한 디버깅을 시도했는데 문제는 아약스 호출을 트리거 할 때 컨트롤러가 호출을 감지하고 컨트롤러가이를 감지하면 실행되고 즉시 데이터를 반환합니다. .

P. 이 2 개의 간격을 주석 처리하면 완벽하게 작동합니다. 그래서이 간격은이 요청 양식을 즉시 차단하는 것 같습니다.

Google 크롬에서도 문제가 될 수 있나요? 왜냐하면 나는 Microsoft Edge에서 완벽하게 작동한다고 생각하기 때문에 (나는 2 번 테스트를 만들었다.)

HTML :

<div class="table-responsive"> 
<table class="table table-condensed table-hover usersTable"> 
    <thead> 
     <tr> 
      <th style="width: 20%">Benutzer</th> 
      <th></th> 
      <th></th> 
      @foreach (var item in Model.Skills) 
      { 
       <th title="@item.Name">@item.ShortName</th> 
      } 
      <th class="text-center">Extension</th> 
      <th class="text-center">Total Calls</th> 
      <th class="text-center">Calls per hour</th> 
      <th class="text-center">Average Call Duration</th> 
     </tr> 
    </thead> 
    <tbody class="usersTableBody"></tbody> 
</table> 
<div class="col-md-12 text-center noSignedInUser" style="display: none;"> 
    <h4 style="color: lightgrey">There is no signed in user</h4> 
</div> 

JS :

$(function() { 
     $('.usersTableBody').on('click', '.hasSkill', function() { 

      var userId = $(this).parent().data('id'); 
      var skillId = $(this).data('id'); 

      if ($(this).hasClass('skillIsActive')) { 
       addRemoveSkill(userId, skillId, false, $(this)) 
      } 
      else { 
       addRemoveSkill(userId, skillId, true, $(this)) 
      } 
     }); 

     //add or remove a skill to a user with ajax 
     function addRemoveSkill(userId, skillId, add, element) { 
      $.ajax({ 
       url: '@Url.Action("AddRemoveSkill","Home")', 
       data: { userId: userId, skillId: skillId, add: add }, 
       success: function (data) { 
        if(data == true) { 
         if (add == false) 
         { 
          $(element).addClass('skillIsInactive') 
          $(element).removeClass('skillIsActive') 
         } 
         else { 
          $(element).addClass('skillIsActive') 
          $(element).removeClass('skillIsInactive') 
         } 
         $(element).addClass('recentlyUpdated'); 
         hasAllSkillsDisabled($(element)); 
        } 
       } 
      }); 
     } 


     function hasAllSkillsDisabled(element) { 

      parent = $(element).parent(); 
      var hasAllDisabled = true; 

      $.each(parent.children('td'), function (i, item) { 
       if ($(item).hasClass('skillIsActive')) 
       { 
        hasAllDisabled = false; 
       } 
      }); 

      if (hasAllDisabled == true) 
      { 
       $(parent).addClass('hasAllSkillsDisabled'); 
      } 
      else { 
       $(parent).removeClass('hasAllSkillsDisabled'); 
      } 
     } 
    }) 

개의 다른 기능 데이터마다 1000MS

  getUserDatas(); 
      getSkillHeader(); 

      var detectClass = 0; 

      function getUserDatas() { 
       var type = $('#Type').val(); 
       var skill = $('#Skill').val(); 
       $.ajax({ 
        url: '@Url.Action("GetUsersDataWithAjax", "Home")', 
       data: { type: type, skill: skill }, 
       success: function (data) { 
       if (data.length == 0) { 
        $('.noSignedInUser').show(); 
       } 
       else { 
        $('.noSignedInUser').hide(); 
       } 
       if (data != false) { 

        $.each(data, function (i, item) { 

         var tr = $('tr[data-id="' + item.Id + '"].agentTr'); 

         //if that row already exists or its new 
         if (!tr.length) 
         { 
          //if new create html and append to table body 
          var dontHaveSkills = "dontHaveSkills"; 
          if (item.hasSkills) { 
           dontHaveSkills = ""; 
          } 
          var hasAllSkillsDisabled = ""; 
          if (item.hasSkills && item.HasAllSkillsDisabled) { 
           hasAllSkillsDisabled = "hasAllSkillsDisabled"; 
          } 

          var html = ''; 
          html += '<tr data-id="' + item.Id + '" class="agentTr ' + dontHaveSkills + ' ' + hasAllSkillsDisabled + ' time' + detectClass + '">'; 
          html += '<td>' + item.Name + '</td>'; 
          html += '<td class="stateName"><div class="text-right ' + item.State.NameClass + '">' + item.State.Name + '</div></td>'; 
          html += '<td class="stateCircle"><div class="statusCircle ' + item.State.CircleClass + '"</div></td>'; 

          $.each(item.Skills, function (j, skill) { 
           var klasa = ""; 
           if (skill.IsActive == true) { 
            klasa = "hasSkill skillIsActive"; 
           } 
           else if (skill.IsActive == false) { 
            klasa = "hasSkill skillIsInactive"; 
           } 
           else { 
            klasa = "unableSkill"; 
           } 

           html += '<td data-id="' + skill.Id + '" class="' + klasa + '" title="' + skill.Name + '">' + skill.ShortName + '</td>'; 

           if (j == 25) { 
            return false; 
           } 
          }); 

          html += '<td class="text-center extension">' + item.Extension + '</td>'; 
          html += '<td class="text-center totalCalls">' + item.AvgCalls.TotalCalls + '</td>'; 
          html += '<td class="text-center callsPerHour">' + item.AvgCalls.CallsPerHour + '</td>'; 
          html += '<td class="text-center avgCallDuration">' + item.AvgCalls.AvgCallDuration + '</td>'; 

          html += '</tr>'; 

          $('.usersTableBody').append(html); 
         } 
         else { 
          //else if its existing update datas 
          tr.removeClass('dontHaveSkills hasAllSkillsDisabled'); 

          var detect = 'time' + (detectClass - 1); 
          tr.removeClass(detect); 

          if (!item.hasSkills) { 
           tr.addClass('dontHaveSkills'); 
          } 
          if (item.hasSkills && item.HasAllSkillsDisabled) { 
           tr.addClass('hasAllSkillsDisabled'); 
          } 


          var stateName = tr.children('.stateName'); 
          stateName.children('div').text(item.State.Name); 
          stateName.children('div').removeClass('bereitName besetzName nbzName pauseName abgemeldetName'); 
          stateName.children('div').addClass(item.State.NameClass); 

          var stateCircle = tr.children('.stateCircle'); 
          stateCircle.children('div').removeClass('Online OnCall AfterTime Pause LoggedOff'); 
          stateCircle.children('div').addClass(item.State.CircleClass); 

          $.each(item.Skills, function (j, skill) { 

           var skillElement = tr.children('td[data-id="' + skill.Id + '"]'); 

           if (!skillElement.hasClass('recentlyUpdated')) { 
            skillElement.removeClass('hasSkill skillIsActive skillIsInactive unableSkill'); 

            if (skill.IsActive == true) { 
             skillElement.addClass('hasSkill skillIsActive'); 
            } 
            else if (skill.IsActive == false) { 
             skillElement.addClass('hasSkill skillIsInactive'); 
            } 
            else { 
             skillElement.addClass('unableSkill'); 
            } 
           } 
           else { 
            skillElement.removeClass('recentlyUpdated'); 
           } 

           if (j == 25) { 
            return false; 
           } 
          }); 


          var extension = tr.children('.extension'); 
          var totalCalls = tr.children('.totalCalls'); 
          var callsPerHour = tr.children('.callsPerHour'); 
          var avgCallDuration = tr.children('.avgCallDuration'); 

          extension.text(item.Extension); 
          totalCalls.text(item.AvgCalls.TotalCalls); 
          callsPerHour.text(item.AvgCalls.CallsPerHour); 
          avgCallDuration.text(item.AvgCalls.AvgCallDuration); 

          tr.addClass('time' + detectClass); 
         } 

         var allTr = $('tr.agentTr'); 

        }); 

       } 

       $('tr.agentTr').each(function (i, item) { 
        if (!$(item).hasClass('time' + detectClass)) { 
         item.remove(); 
        } 
       }); 
       detectClass++; 
       $('.usersTable').waitMe('hide'); 
       } 
      }); 
      } 


      function getSkillHeader() { 
       $.ajax({ 
        url: '@Url.Action("GetSkillHeaderWithAjax", "Home")', 
        success: function (data) { 
         if (data.length == 0) { 
          $('.allSkillsHidden').show(); 
         } 
         else { 
          $('.allSkillsHidden').hide(); 
         } 

         if (data != false) { 

          $.each(data, function (i, item) { 

           var tr = $('tr[data-id="' + item.Id + '"].skillTr'); 

           if (!tr.length) { 
            var html = ''; 

            html += '<tr data-id="' + item.Id + '" class="skillTr">'; 

            html += '<th class="name">' + item.Name + '</th>'; 
            html += '<th class="text-center waitingQueue">~</th>'; 
            html += '<th class="text-center activeCalls">~</th>'; 
            html += '<th class="text-center totalFreeAgents">' + item.TotalFreeAgents + '</th>'; 
            html += '<th class="text-center totalSignedInAgents">' + item.TotalSignedInAgents + '</th>'; 

            html += '</tr>'; 

            $('.skillsHeaderTableBody').append(html); 
           } 
           else { 

            var name = tr.children('.name'); 
            name.text(item.Name); 


            var totalFreeAgents = tr.children('.totalFreeAgents'); 
            totalFreeAgents.text(item.TotalFreeAgents); 

            var totalSignedInAgents = tr.children('.totalSignedInAgents'); 
            totalSignedInAgents.text(item.TotalSignedInAgents); 
           } 

          }); 
         } 
         $('.skillHeaderTable').waitMe('hide'); 
        } 
       }); 
      } 
     //call getUserDatas method every 1 seconds 
     setInterval(function() { 
      getUserDatas(); 
     },1000); 

     setInterval(function() { 
      getSkillHeader(); 
     }, 1000); 

C 번호를 얻는다 :

public ActionResult AddRemoveSkill(string userId, string skillId, bool add) 
    { 
     try 
     { 
      var skill = _sysCfgContext.GetUserSkill(Guid.Parse(userId), Guid.Parse(skillId)); 

      if (add) 
       skill.IsActive = true; 
      else 
       skill.IsActive = false; 

      _sysCfgContext.EditUserSkill(skill); 
      _sysCfgContext.SaveChanges(); 

      return Json(true, JsonRequestBehavior.AllowGet); 
     } 
     catch (Exception ex) 
     { 
      return Json(false, JsonRequestBehavior.AllowGet); 
     } 
    } 

Answer 1

저는이 두 함수가 서로 종속되지 않는다고 가정합니다.

function getUserDatas() { 
    var type = $('#Type').val(); 
    var skill = $('#Skill').val(); 
    return $.ajax(function() { 
    //Code omitted for brevity 
    }); 
} 

function getSkillHeader() { 
    return $.ajax(function() { 
    //Code omitted for brevity 
    }); 
} 


getUserDatas(); 
getSkillHeader(); 

var interval = setInterval(function(){ 
    $.when(getUserDatas(), getSkillHeader()) 
     .then(function(resultUserDatas,resultSkillHeader) 
},1000); 

이 코드는 테스트되지 않은 코드입니다.