Эффект наложения JQuery на ошибку прокрутки

Question

Привет, У меня есть код js, который набирает текст на моей веб-странице, и набирает текст при прокрутке вниз по концу страницы. Для первого это работает нормально, но когда вы начинаете прокрутки быстрее вниз до эффекта набрав сходит с ума, как я могу исправить это

demo page

код

$(window).scroll(function (e) { 
    var elem = $(".hello-page"); 
    var scrollTop = $(window).scrollTop(); 
    var blockTop = elem.offset().top; 
    var docHeight = $(document).height(); 
    var windowH = $(window).height(); 

    if (scrollTop >= blockTop) { 
     var helloPageA = $(".hello-page").find("a"); 
     var text = helloPageA.attr("data-text"); 
     helloPageA.text(''); 
     $.each(text.split(''), function (i, letter) { 
      setTimeout(function() { 
       helloPageA.html(helloPageA.html() + letter); 
      }, 150 * i); 
     }); 
    } else { 
     elem.find("a").text(''); 
    } 
}); 

jsfiddle example

Спасибо за вашу помощь

Answer 1

Итак, вот решение - http://jsfiddle.net/u3ojjx8r/1/ Я позаимствовал исходная структура кода из предыдущего ответа здесь, и она была удалена, к сожалению, поэтому я не могу упомянуть одного из соавторов. Хотя код выглядел очень похоже на тему-стартер.

Идея приведенного ниже кода заключается в том, чтобы отделить очередь символов от визуализации и фактического рендеринга. Еще одно важное улучшение - это всегда контролировать время ожидания, т. Е. Никогда не планировать более одного тайм-аута. Это позволяет вам отменить их в любое время без непредсказуемого/неконтролируемого поведения.

var timeoutVar; 
var queue = []; 
var drawQueueTimeout = -1; 
var helloPageA = $(".hello-page").find("a"); 

function pushQueue (element) { 
    console.log('pushQUeue', element.char); 
    queue.push(element); 
    checkQueue(); 
} 

function flushQueue() { 
    console.log('flushQueue'); 
    queue = []; 

    clearTimeout(drawQueueTimeout); 
    drawQueueTimeout = -1; 
} 

function checkQueue() { 
    console.log('checkQueue', queue.length, drawQueueTimeout); 
    if (queue.length > 0 && drawQueueTimeout < 0) { 
     console.log('schedule drawQueue'); 
     drawQueueTimeout = setTimeout(drawQueue, 150); 
    } 
} 

function drawQueue() { 
    drawQueueTimeout = -1; 

    console.log('draw queue'); 
    if (queue.length > 0) { 
     var element = queue.shift(); 
     console.log('drawQueue', element.char); 
     helloPageA.html(helloPageA.html() + element.char); 
    } 

    checkQueue(); 
} 

$(window).scroll(function (e) { 
    var elem = $(".hello-page"); 
    var scrollTop = $(window).scrollTop(); 
    var blockTop = elem.offset().top; 
    var docHeight = $(document).height(); 
    var windowH = $(window).height(); 

    if (scrollTop + windowH == docHeight) { 
     // Empty anything typed so far 
     helloPageA.empty(); 
     flushQueue(); 

     var text = helloPageA.attr("data-text"); 
     helloPageA.text(''); 
     $.each(text.split(''), function (i, letter) { 
      pushQueue({ 
       char: letter, 
       index: i 
      }); 
     }); 

    } else { 
     helloPageA.empty(); 
     flushQueue(); 
    } 
});