Infinite loop in listing

Question

I made this code to present the games registered, but the page does not finish loading.

Is in loop infinite? If yes, why? How could I arrange?

window.addEventListener("load", showJogos(JSON.parse(localStorage.getItem('Jogos'))), false);

function showJogos(loadJogos){
  var times = JSON.parse(localStorage.getItem('Times'));
  listar = $('#mostrarJogos');
  if (loadJogos == null) {
    listar.append('<h3 class="col s12 center-align"> Nenhum jogo registrado</h3>');
  } else {
    for (var i = 0; i < loadJogos.length; i++) {
      var viewTime1 = loadJogos[i].time1
      var viewTime2 = loadJogos[i].time2

      for (var t = 0; t < times.length; i++) {
        if (viewTime1 == times[t].id){
          for (var u = 0; u < times.length; i++) {
            if (viewTime2 == times[u].id) {
                listar.append('<h3 class="col l5 right-align">' + times[t].nome + '</h3><img class="col l2" src="img/x.png"><h3 class="col l5"> ' + times[u].nome + '</h3>');
                break;
            }
          }
        break;
        }
      }
    }
  }
}

Answer 1

for (var t = 0; t < times.length; i++)

Here you are increasing the i instead of the t, so the loop will continue forever, because the t will never get out of place. Switch to t++

Same thing here:

for (var u = 0; u < times.length; i++)

change to u++