Changing background-image with jquery fadeTo() animation fails after a while

Question

Update: I found a better way of doing this. There's a library called Backstretch.
I hope it will be helpful for someone else.

I'm trying to change the background of the tag every 10 seconds with animation but after a while of working, it does change every 2-3 seconds instead of 10.

What is wrong with the code? Why does it go crazy after a while of waiting as I explained above? For example, after about 10 minutes or so.

<section class='set-bg'>...</section>

$('.set-bg').each(function() {
  var bgs = [];
  $.get('/api/listbanners', (e) => {
    bgs = e["background"];
    x(0);
  });

  function x(i) {
    $('.set-bg').css('background-image', 'url(' + bgs[i] + ')').fadeTo(0, 0.6).fadeTo(1000, 1);
    i++;
    if (i == bgs.length) {
      i = 0;
    }
    setTimeout(x, 10000, i);
  }
});