Question

当我向下滚动页面时，我正在使用Waypoints.js来启动计数器功能：

$(".counter").waypoint(function() {
  $(".counter").count();
}, {offset:"100%"});

一切都很好但是如果我向上滚动页面再向下滚动到计数器，它会重新开始计数。如何只执行一次计数器功能？

Answer 1

不确定该代码的用途，但您总是可以使用flag变量来控制这样的代码：

var executed = false;
$(".counter").waypoint(function() {
    if (!executed) {
        executed = true;
        $(".counter").count();
    }
}, {offset:"100%"});

Answer 2

我知道这已经有了一个已接受的答案，但当前版本的jQuery Waypoints，2.x已经内置了triggerOnce选项。如果它应该执行，你不需要手动保留一个标志。

$(".counter").waypoint(function() {
  $(".counter").count();
}, {offset:"100%", triggerOnce:true});

这与在处理程序末尾的航点上调用destroy以使它永远不会再次执行相同：

$(".counter").waypoint(function() {
  $(".counter").count();
  $(this).waypoint('destroy');
}, {offset:"100%"});

Answer 3

您可以在事件第一次触发时设置哨兵值，并在下次基于此时跳过逻辑。

这是你可以做到的一种方式：

var count = 0;

$(".counter").waypoint(function() {
  if (count > 0) return;
  $(".counter").count();
  count++;
}, {offset:"100%"});

Answer 4

这个功能做得很好，没有任何需要照顾的额外变量或状态：

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

https://jsfiddle.net/uje57boz/1/

仅执行一次功能

4 个答案: