javascript - JQuery:setInterval 不适用于each() 方法。 "this"关键字错误还是代码错误？

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 6 年前。

我编写了简单的 JQuery 函数，用于在具有特定类名的一系列 div 中从 0 计数到指定数字:

    <div class="number">50%</div>
    <div class="number">75%</div>

这是 JQuery 代码:

$(document).ready(function () {
$(".number").each( function() {
    var percent = $(this).text().replace("%","");
    console.log("test " + percent);

    function countToPercent(percent) {
        var interval = setInterval(counter,25);
        var n = 0;
        function counter() {
            if (n >= percent) {
                clearInterval(interval);
            }
            else {
                n += 1;
                // console.log(n);
                $(this).text(n + "%");
            }
        }
    }

    countToPercent(percent);
})
});

不幸的是，它现在无法工作 - 此行中可能存在问题:

$(this).text(n + "%")

我使用控制台调试了它并评论了 console.log(n) 有效 - 它从 0 计数到指定的数字。所以选择正确的 DOM 元素一定是有问题的。

是否禁止将 setInterval() 与 .each() 方法或“this”关键字一起使用？或者代码中是否存在一些错误？

Answer 1

您的问题是 this 关键字在间隔范围的上下文中不存在。

通过提供注入(inject)变量将间隔内容包装到另一个作用域并调用它:

    $(function () {
    
      $(".number").each( function() {
        var $this = $(this);
        var percentage = parseFloat($this.text().replace("%",""));
        console.log("test " + percentage);
    
    
        (function(percentage, jqObject) {
          var n = 0;
          var interval = setInterval(function() {
            if(n >= percentage) return clearInterval(interval);
            n++;
            jqObject.text(n + '%');
          }, 25);
        })(percentage, $this);
        
      });
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="number">50%</div>
<div class="number">75%</div>

或者您可能有执行相同操作的外部函数:

$(function () {
    
   function animatePercentageProgress(percentage, jqObject) {
      var n = 0;
      var interval = setInterval(function() {
        if(n >= percentage) return clearInterval(interval);
        n++;
        jqObject.text(n + '%');
      }, 25);
   }
    
    $(".number").each( function() {
      var $this = $(this);
      var percentage = parseFloat($this.text().replace("%",""));
      console.log("test " + percentage);  
      animatePercentageProgress(percentage, $this);
    });
        
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <div class="number">50%</div>
    <div class="number">75%</div>

或更多“功能方式”:

$(function () {
        
   function animatePercentageProgress(idx, jqObjectPointer) {
      var jqObject = $(jqObjectPointer);
      var percentage = parseFloat(jqObject.text().replace("%",""));

      var n = 0;
      var interval = setInterval(function() {
        if(n >= percentage) return clearInterval(interval);
        n++;
        jqObject.text(n + '%');
      }, 25);
   }

    $(".number").each(animatePercentageProgress);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <div class="number">50%</div>
    <div class="number">75%</div>