只调用一次 JS 函数进行窗口滚动答案

【问题标题】：Call JS function only once for window scroll只调用一次 JS 函数进行窗口滚动
【发布时间】：2018-04-22 18:00:14
【问题描述】：

当用户滚动到特定部分时，我有一个写入文本（打字机效果）的功能。但我只想做一次。因此，如果用户第一次滚动文本被写入，那就应该是全部了。但是如果用户再次滚动（无论向哪个方向滚动），都会再次调用该函数，因此会一次又一次地输入文本……这是 JS 代码：

var counter = 0;
$(window).on('scroll', (function () {
    counter ++;
    if(counter < 80){
        if ($(window).scrollTop() >= $('#anchor-form').offset().top - 200) {
            $(window).scrollTop();
            $('.form__icon').addClass('form--animate');
            showText("Some Text to be written", 0);
        }
    }
}));

function showText(msg, x) {
    if (x < msg.length) {
        $txt_form.html(msg.substring(0, x+1));
        x++;
        setTimeout(function() {
            showText(msg,x)
        }, 50)
    }
};

如您所见，我已通过设置计数器来阻止它。我检查了当窗口滚动到此部分时将有多少“计数”，只需在 IF 语句中设置值。但我觉得这还不够，而且是“良好实践”的方法。除了这种预防方法之外，有时文本会出现故障。我也尝试过使用 jQuery .one() 方法，但它不起作用。

我会很感激任何建议。

【问题讨论】：

调查下划线/lodash _.debounce 方法。它是专门为这种类型的用例设计的。 lodash.com/docs/4.17.5#debounce
这似乎没问题，但对于像我这样的新手来说现在太复杂了。无论如何感谢您的帮助！

标签： javascript jquery css function

【解决方案1】：

在 if 语句中获取第二个计数器并将其设置为 counter2++，然后在 if 语句中检查 count2 === 1

【讨论】：