jquery 函数的运行时间很慢

Question

这个功能很好用，就是有点慢

html

<table>
    <tr>
        <td>
            <p><span id="ItemPrice">10</span></p>
        </td>
        <td>
            <input type="number" id="quantity" name="quantity" value="1" min="1" />
        </td>
        <td>
            <p><span id="ItemTotal">0</span></p>
        </td>
    </tr>
</table>

javascript

function CountItemTotal() {
        $("span#ItemTotal")
            .each(function () {
                $(this).text(
                    +$(this)
                        .closest("tr")
                        .find("#ItemPrice")
                        .text()
                    *
                    +$(this)
                        .closest("tr")
                        .find("#quantity")
                        .val()
                )
                    .fadeOut("fast")
                    .fadeIn("fast");
            });
    }

$("input#quantity").change(function () {
        CountItemTotal();
    });

知道如何增加此函数的运行时间吗？

" 我不知道为什么我收到这条消息，但它说我必须添加一些额外的文本，因为我的大部分 post 都是代码，不管这个 :) "

Answer 1

为了更好地执行计算，您可以进行以下更改。

删除 .fadeOut("fast") 和 .fadeIn("fast")。
将 id 更改为 class，因为您提到您需要多次重复这些行。
删除了 each() 以便仅更新当前行。

请参阅下面的工作示例。

function CountItemTotal($this) {
  var tr = $this.closest("tr");
  var ItemTotal = tr.find(".ItemTotal");
  var ItemPrice = tr.find(".ItemPrice");
  var quantity = tr.find(".quantity");

  ItemTotal.text(ItemPrice.text() * quantity.val());
}

$("input.quantity").change(function() {
  CountItemTotal($(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <p><span class="ItemPrice">10</span></p>
    </td>
    <td>
      <input type="number" class="quantity" value="1" min="1" />
    </td>
    <td>
      <p><span class="ItemTotal">0</span></p>
    </td>
  </tr>
  <tr>
    <td>
      <p><span class="ItemPrice">10</span></p>
    </td>
    <td>
      <input type="number" class="quantity" value="1" min="1" />
    </td>
    <td>
      <p><span class="ItemTotal">0</span></p>
    </td>
  </tr>
  <tr>
    <td>
      <p><span class="ItemPrice">10</span></p>
    </td>
    <td>
      <input type="number" class="quantity" value="1" min="1" />
    </td>
    <td>
      <p><span class="ItemTotal">0</span></p>
    </td>
  </tr>
  <tr>
    <td>
      <p><span class="ItemPrice">10</span></p>
    </td>
    <td>
      <input type="number" class="quantity" value="1" min="1" />
    </td>
    <td>
      <p><span class="ItemTotal">0</span></p>
    </td>
  </tr>
</table>

Answer 2

只是为了帮助我得到了

这个查询比我发布的第一个查询应用效果更好

function CountItemTotal($this) {
 var tr = $this.closest("tr");
 var ItemTotal = tr.find(".ItemTotal");
 var ItemPrice = tr.find(".ItemPrice");
 var quantity = tr.find(".quantity");

ItemTotal.fadeOut(function () {
     $(this).text(ItemPrice.text() * quantity.val()).fadeIn();
  });
}

$("input.quantity").change(function() {
   CountItemTotal($(this));
});

元素淡出然后以新值出现:)

jquery 函数的运行时间很慢

jquery function's runtime is slow

jquery

runtime