Загружать и показывать элементы foreach, немного подождать, загрузить следующий и т. Д.

Question

У меня есть iOS WebApp, который на 100% основан на HTML / PHP (в основном это просто веб-сайт), и у него есть список HTML, в котором я хочу отображать множество элементов JSON в списках через foreach.Однако список кажется таким большим, что он разрушает весь сайт.

Итак, чтобы хотя бы загрузить пару элементов, которые я использовал >> if ($ num == 50) break;<<, чтобы показать только первые 50 элементов foreach.Но как я могу загрузить первые 50 элементов, подождать 2 секунды и загрузить еще 50? </p>

$data = json_decode(url_get_contents("LinkToJson"));

$num = 1;
foreach($data->data as $dat){
$num++;
echo '
<li> '. $dat->Name .' </li>';
if($num == 50) break;
} ?> 

На самом деле все, что мне действительно нужно, это способ загрузки и отображения первых 50 элементов, чтобы пользователи могли видетьпервая пара элементов foreach, немного подождите и загрузите следующие 50, немного подождите, загрузите следующие 50 и т. д.

Я надеюсь, что кто-нибудь здесь сможет как-то мне помочь.Большое вам спасибо!

Answer 1

Хорошо, так что из того, что вы мне сказали, это чистый HTML.Это просто очень грубый пример, обобщение, чтобы попытаться помочь вам понять.Настоящее волшебство произойдет, когда вы делаете асинхронные вызовы.В основном вы будете вызывать URL-адрес PHP, и при его успешном обратном вызове (или setTimeInterval) вы будете делать тот же вызов, только передавая параметры начала и конца, чтобы ваш PHP-скрипт знал, что пропустить и когда остановить.

$data = json_decode(url_get_contents("LinkToJson"));

$num = 1;
foreach($data->data as $dat) {
  $num++;

  if($num >= $REQUEST['start']) {
    continue;
  }

  if ($num == $REQUEST['end']) {
    break;
  }
  echo '<li> '. $dat->Name .' </li>';
}

Теперь вам просто нужно сделать ajax-вызов и при успешном обратном вызове (или использовать функцию setTimeout, чтобы отложить дальнейший вызов).

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // do something with this.responseText;
    }
};
xhttp.open("GET", "path-to-php-script&start=0&end=50", true);
xhttp.send();

setInterval(function () {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        // do something with this.responseText;
      }
  };
  xhttp.open("GET", "path-to-php-script&start=50&end=100", true);
  xhttp.send();
}, 2000)