jquery - 文档滚动问题(输入动画/使 div 做某事)

Question

这个问题是关于我在尝试执行我的代码时遇到的这个问题。

1. 为了乐趣/练习而编码(我是 jQuery 新手)
2. 不知何故搞砸了
3. 这是我的故事

到目前为止我的代码...

var position = $("#second").offset();
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y >= position.top) {
        //text that belongs on second slide
        var text = "Lorem ipsum dolor sit amet... consectetur adipiscing elit. Praesent sagittis sodales ex vel pellentesque. Vestibulum quis arcu odio. Curabitur feugiat lorem quis luctus faucibus. ";

        //text is split up to letters
        $.each(text.split(""), function (i, letter) {

            //we add 100*i ms delay to each letter 
            setTimeout(function () {

                //we add the letter to the container
                $("#text").html($("#text").html() + letter);
            }, 80 * i);
        });
    }
});

我们的想法是让文本在您单击按钮滚动到下一张幻灯片时开始播放“打字机”动画。它工作正常，但只有当我按下按钮时。如果我用鼠标向下滚动，代码就会变得疯狂。看这里:preview from where i host my code/jsfiddle

您可以向下滚动，文本不会在 JSfiddle 中乱七八糟，但在我托管我的代码的网站上不会。但是，如果您在 JSfiddle 上向上滚动并向下滚动，文本将会变得乱七八糟。

此外，是的，我知道闪烁的文字不受欢迎，请不要对此发表评论。

Answer 1

发生这种情况是因为每次您上下滚动(在 fiddle 中)该功能都会一次又一次地触发。一个简单的解决方案是使用变量作为检查。设置一些变量 tok false，当你滚动时如果该变量等于 false，然后运行脚本并将其设置为 true(所以它不会再开火)

var triggered = false;

...

if(y >= position.top && triggered === false){
   triggered = true; //the above line will return false and won't fire the function

FIDDLE