JavaScript计数器，一定时数到3<div> 到达了</div><div id="text_translate"><p>我很难解决这个问题。 所以我得到了计数器，我想在用户向下滚动页面并达到某个 class 后从 0 慢慢计数到 3，在我的例子中是“.domov2”</p><p> 如果我删除 API (EventListener)，那么计数器工作得很好，但它已经在站点加载后立即开始计数。</p><p> 我设法做到了，但是当我向下滚动时不是执行 1 次，function 在到达 div 后执行了很多次滚动（我对 API 真的很糟糕）。 如何限制 function 执行 1 次并使其仅在条件下运行。</p><p> HTML：</p><pre class="lang-html prettyprint-override"> <section class="domov2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </section> <div id="counter" data-target="3"> -1 </div></pre><p> JavaScript</p><pre> $(window).bind('scroll', function() { if($(window).scrollTop() >= $('.domov2').offset().top + $('.domov2').outerHeight() - window.innerHeight) { // create function startCount() const startCount = function() { // get number value from data-target and current number const target = +counter.getAttribute('data-target'); const count = +counter.innerText; // if count<target if (count < target) { // add to current value +1 var sestevek = count + 1 // replace current value in html with recently updated value "sestevek" counter.innerText = sestevek; // slow down condition for 0.3s setTimeout(startCount, 300); } else { //if current value is = target, then keep target counter.innerText = target; }}; //execute function startCount(); } });</pre></div>

Question

我很难解决这个问题。 所以我得到了计数器，我想在用户向下滚动页面并达到某个 class 后从 0 慢慢计数到 3，在我的例子中是“.domov2”

如果我删除 API (EventListener)，那么计数器工作得很好，但它已经在站点加载后立即开始计数。

我设法做到了，但是当我向下滚动时不是执行 1 次，function 在到达 div 后执行了很多次滚动（我对 API 真的很糟糕）。 如何限制 function 执行 1 次并使其仅在条件下运行。

HTML：

<section class="domov2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</section>

<div id="counter" data-target="3">
-1
</div>

JavaScript

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= $('.domov2').offset().top + $('.domov2').outerHeight() - window.innerHeight) {
        // create function startCount()
const startCount = function() {
    // get number value from data-target and current number
    const target = +counter.getAttribute('data-target');
    const count = +counter.innerText;

    // if count<target 
    if (count < target) {
        // add to current value +1
        var sestevek = count + 1
        // replace current value in html with recently updated value "sestevek"
        counter.innerText = sestevek;
        // slow down condition for 0.3s
        setTimeout(startCount, 300);
    } else {
        //if current value is = target, then keep target
        counter.innerText = target;
    }};
    
    //execute function
    startCount();
    }
});

Answer 1

Chris G 非常感谢你，我成功了，现在柜台工作完美，谢谢你的帮助！

更新 JavaScript：

let countStarted = false;

function somefunction(){
if (countStarted == false){
// create function startCount()
const startCount = function() {
  // get number value from data-target and current number
  const target = +counter.getAttribute('data-target');
  const count = +counter.innerText;
  countStarted = true;
  // if count<target 
  if (count < target) {
      // add to current value +1
      var sestevek = count + 1
      // replace current value in html with recently updated value "sestevek"
      counter.innerText = sestevek;
      // slow down condition for 0.3s
      setTimeout(startCount, 300);
  } else {
      //if current value is = target, then keep target
      counter.innerText = target;
  }};

  //execute function
  startCount();
}}
//execute somefuntion() when div class comes into view area
$(window).bind('scroll', function() {
  if($(window).scrollTop() >= $('.domov2').offset().top + $('.domov2').outerHeight() - window.innerHeight) {
      somefunction()
  }});