Javascript/Jquery：代码不重复我尝试过的任何循环

Question

Is there a reason why I am unable to loop the autoscroll function in the following code?

$(window).load(function(){
    autoScroll();
});

function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

    $(window).scroll(function() {   
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $(window).scrollTop(0);
        }
    });
}

I've already tried several answers to other simular questions on this site with no success.

EDIT:

To put it simply I have two html pages, index.html and iframe.html. Index.html has a iframe pointing to iframe.html. The above code is running on iframe.html. The above code scrolls down the webpage contained in the iframe. What I want it to do is go back to the top of the page after it finishes scrolling to the bottom and then repeat for 'X' amount of times.

I've already tried the following:

$(window).load(function(){
  var i = 0;
  do
    autoScroll();
    i++
  while(i<10);

});

function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

    $(window).scroll(function() {   
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $(window).scrollTop(0);
        }
    });
}

$(window).load(function(){
  var i = 0;
  while(i<10){
    autoScroll();
    i++
  };

});

function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

    $(window).scroll(function() {   
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $(window).scrollTop(0);
        }
    });
}

$(window).load(function(){
  for(i<10; i<10; i++){
    autoScroll();
  };

});

function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

    $(window).scroll(function() {   
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $(window).scrollTop(0);
        }
    });
}

$(window).load(function(){
  setInterval(function(){
    autoScroll();
  }, 3000)

});

function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

    $(window).scroll(function() {   
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $(window).scrollTop(0);
        }
    });
}

I've also tried all of the above shown above but around the contents of the autoScroll function like this:

$(window).load(function(){
    autoScroll();
});

function autoScroll()
    var i = 0;
    do
        $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

        $(window).scroll(function() {   
           if($(window).scrollTop() + $(window).height() == $(document).height()) {
               $(window).scrollTop(0);
           }
        });
    i++
    while(i<10);
}

Answer 1

Use a recursive function: by calling autoScroll(); after the animation is completed:

autoScroll();
function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear',function(){
     $(window).scrollTop(0);
             autoScroll();
    });
}

demo: https://jsfiddle.net/bbdsj2bg/1/