Jquery在滾動問題上的打字效果

嗨我有一些js代碼在我的網頁上輸入效果，當您向下滾動頁面時開始輸入。對於第一次它正常工作，但是當你開始快速滾動到了打字效果都瘋了我怎麼能解決這個問題Jquery在滾動問題上的打字效果

代碼

$(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

感謝您的幫助

來源

2015-10-15 Aram Mkrtchyan

是啊，如果你滾出它弄亂了，你需要打破滾動出事件 –

我試着做，與標誌機智cleartimeout但沒有改變 –

嗯，我會考慮如何將循環解決你的問題，但同時可能使用GSAP動畫？ https://greensock.com/splittext-example –

所以，這裏是解決方案 - 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(); 
    } 
});

在for循環

來源

2015-10-16 07:45:15

Jquery在滾動問題上的打字效果

回答

相關問題