JavaScript의 setInterval에 대한 대안은 무엇입니까?

Question

내 콘텐츠를 실시간으로 표시해야하지만, 많은 것을로드 할 때 너무 많은 CPU를 사용하며 매우 지체가 있습니다.

내 코드에 대한 대안이 있습니까?

$(document).ready(function() { 
    var refresh_bal = setInterval(
     function(){ 
      $.get('./php/get_balance.php', function(balance) { 
       $('.balance').html(balance); 
      }); 
     }, 1000); 

    var refresh_total = setInterval(
     function(){ 
      $.get('./php/get_total_bets.php', function(total) { 
       $('.total').html(total); 
      }); 
     }, 1000); 

    var refresh_profit = setInterval(
     function(){ 
      $.get('./php/get_profit.php', function(profit) { 
       $('.profit').html(profit); 
      }); 
     }, 1000); 

    $('.haa').on('click', function() { 
     var refresh_bets = setInterval(
      function(){ 
       $.get('./php/get_bets.php', function(bets) { 
        $('.betsTable').html(bets); 
       }); 
      }, 1000); 
    }); 

    var refresh_site = setInterval(function(){ 
     $.get('./php/get_site.php', function(site) { 
      $('.siteStats').html(site); 
     }); 
    }, 1000); 

    var refresh_client = setInterval(function(){ 
     $.get('./php/get_client.php', function(client) { 
      $('.clientShow').html(client); 
     }); 
    }, 1000); 

    var refresh_server = setInterval(function(){ 
     $.get('./php/get_server.php', function(server) { 
      $('.serverShow').html(server); 
     }); 
    }, 1000); 

    $('.ha').on('click', function() { 
     var refresh_chat = setInterval(function() { 
      $.get('./php/get_chat.php', function(chats) { 
       $('.chats').html(chats); 
      }); 
     }); 
    }); 
}); 

Answer 1

(function loop() { 
    // do the logic here 
    ... 
    ... 
    setTimeout(loop, 1000); //recurse 
})(); // doesn't need to trigger the function. 

Answer 2

당신이 WebSocket을로 이동하지 않고 코드의 성능을 향상시키기 위해 할 수있는 두 가지 기본 가지가 있습니다.

먼저 반복적 인 ajax 요청을 처리 할 때는 setInterval을 setTimeout으로 대체하십시오. 이것을 수행하는 이유는 setInterval을 사용하는 경우 이전에 완료되기 전에 다음 브라우저가 전송되어 결국 브라우저가 손상 될 수 있습니다. setTimeout을 사용하여 다음 요청을하기 전에 이전이 완료되었는지 확인하십시오.

(function refreshBalance() { 
    $.get('./php/get_balance.php', function(balance) { 
     $('.balance').html(balance); 
     setTimeout(refreshBalance,1000); 
    }); 
})(); 

그런 다음 모든 요청을 최대한 적은 수의 요청으로 통합하는 것이 가장 이상적입니다. 이는 요청할 때마다 헤더와 쿠키를 다시 보내야하고 브라우저가 한 번에 단일 도메인으로 보낼 수있는 최대 동시 HTTP 요청 수에 제한이 있기 때문입니다. 제한에 도달하면 이전 요청이 완료 될 때까지 아약스 요청이 지연됩니다. 이것은 또한 브라우저를 잠글 수 있습니다. 당신이 HTML5 사이트를 프로그래밍하는 경우

Answer 3

, 당신은 WebWorkers 느릅 나무는 달리 매우 빠르게 사용할 수 있습니다 당신은 jQuery를 $.when() 및 setTimeout 사용해야합니다. 물론 웹 소켓을 사용할 수 있지만 익숙하지 않은 경우 성능을 향상시켜야하는 솔루션이 있습니다.

$(function() { 
    function refresh_bal(){ 
     return $.get('./php/get_balance.php', function(balance) { 
      $('.balance').html(balance); 
     }); 
    } 

    function refresh_total(){ 
     return $.get('./php/get_total_bets.php', function(total) { 
      $('.total').html(total); 
     }); 
    } 

    function refresh_profit(){ 
     return $.get('./php/get_profit.php', function(profit) { 
      $('.profit').html(profit); 
     }); 
    } 

    function refresh_site(){ 
     return $.get('./php/get_site.php', function(site) { 
       $('.siteStats').html(site); 
      }); 
    } 

    function refresh_client() { 
     return $.get('./php/get_client.php', function(client) { 
      $('.clientShow').html(client); 
     }); 
    } 

    function refresh_server() { 
     return $.get('./php/get_server.php', function(server) { 
      $('.serverShow').html(server); 
     }); 
    } 

    (function refresh() { 
     $.when(refresh_bal(), refresh_total(), refresh_profit(), refresh_site(), refresh_client(), refresh_server()).then(function() { 
      setTimeout(refresh, 1000); 
     }); 
    })(); 

     $('.ha').on('click', function() { 
      var refresh_chat = function() { 
       $.get('./php/get_chat.php', function(chats) { 
        $('.chats').html(chats); 
        setTimeout(refresh_chat, 1000); 
       }); 
      }; 
     }); 

     $('.haa').on('click', function() { 
      var refresh_bets = function(){ 
       $.get('./php/get_bets.php', function(bets) { 
        $('.betsTable').html(bets); 
        setTimeout(refresh_bets, 1000); 
       }); 
      }; 
    }); 

}); 

또한 이제 모든 PHP 파일을 포함하고 모든 값을 포함하는 JSON 에코 PHP를 단일 아약스 전화를 할 수

편집 할 수 있습니다.

$(function() { 
    (function refresh() { 
     $.getJSON('./php/op.php', function(data) { 
      $('.balance').html(data.balance); 
      $('.total').html(data.total); 
      $('.profit').html(data.profit); 
      ... 
      setTimeout(refresh, 1000); 
     }); 
    })(); 
});