Question

您好我有一些js代码在我的网页上输入效果，当您向下滚动页面时它开始输入。首先它正常工作，但是当你开始向上滚动到更快时，打字效果变得疯狂如何解决这个问题

代码

$(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/ 我从前面的答案中借用了代码的初始结构，遗憾的是它已被删除，因此我无法提及其中一位共同作者。虽然代码看起来非常类似于topic-starter的一个。

下面代码的想法是将要渲染的字符排队和实际渲染分开。另一个重要的改进是始终控制超时，即从不安排超过一次超时。这允许您在没有不可预测/不受控制的行为的情况下随时取消它们。

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();
    }
});

Jquery在滚动bug上输入效果

1 个答案: