限制counting函数仅执行一次：isInViewport.js解决方案求助

这问题我熟！你现在遇到的是inview事件每次检测到元素进入视口就重复触发counting函数的问题，其实只要加个执行状态标记，或者解绑事件就能搞定，给你几个实用的方案：

方案一：用状态标记控制执行次数 #

适合需要保留「元素离开视口时重置计数器」逻辑，但只让counting执行一次的场景：

// 初始化一个状态变量，标记counting是否已经执行过
let hasExecutedCounting = false;

$('.earn').on('inview', function (event, visible) {
  console.log('inview');
  if (visible === true && !hasExecutedCounting) {
    console.log('inview count');
    counting();
    // 执行完成后标记为已执行，后续进入视口不再触发
    hasExecutedCounting = true;
  } else if (!visible) {
    // 只有还没执行过counting的时候，离开视口才重置计数器
    // 避免已经计数完成后，离开视口把数字变回0
    if (!hasExecutedCounting) {
      $('#counter').text(0);
      $('#counter2').text(0 + "$");
    }
  }
});

方案二：执行后直接解绑inview事件 #

适合执行完counting后，不需要再监听该元素的inview事件的场景：

$('.earn').on('inview', function (event, visible) {
  console.log('inview');
  if (visible === true) {
    console.log('inview count');
    counting();
    // 执行完成后，解绑当前元素的inview事件，彻底停止监听
    $(this).off('inview');
  } else {
    $('#counter').text(0);
    $('#counter2').text(0 + "$");
  }
});

方案三：用jQuery的one()方法绑定单次事件 #

如果你的需求是「counting只需要触发一次，后续不管元素进不进视口都不再处理」，可以直接用one()代替on()，它会自动在事件触发一次后解绑：

$('.earn').one('inview', function (event, visible) {
  console.log('inview');
  if (visible === true) {
    console.log('inview count');
    counting();
  }
  // 注意：用one()的话，元素离开视口的逻辑也只会触发一次，如果需要每次离开都重置，这个方案不适用
});

额外提醒 #

如果你希望元素离开视口时，不管counting有没有执行过都重置计数器，那去掉方案一里else if块里的if (!hasExecutedCounting)判断就行，根据你的实际需求调整~

内容的提问来源于stack exchange，提问作者John Enosh