javascript - 在另一个更新后更新一个元素

Question

我正在处理一个页面，其中一个元素 ('.item--itemprice') 通过另一个我不想接触的函数更新其文本。我想要做的是更新另一个元素 ('.header--itemprice')，使其文本与第一个元素匹配。

不幸的是，下面的处理程序似乎比更新函数运行得更快。结果，标题要么保留在前面的文本中，要么变为空白字符串。有没有办法将下面的最后一行延迟到第一个元素完成更新之后？

$('select').on('change', function() {
   const headPrice = document.querySelector('.header--itemprice');
   const lowerPrice = document.querySelector('span.item--itemprice');
   const $lowerText = $(lowerPrice).text();
   $(headPrice).text($lowerText);
});

这是预先存在的函数:

$(document).ready( function () {
  $('#txtQuantity, .ProductGroupItemQuantity').blur(updatePrice);
});

function updatePrice() {
  var itemPriceEl = $('.item--itemprice');
  var itemCountEl = $('#txtQuantity');
  var groupUpdateEl = $('#lnkProductGroupUpdatePrice');
  var groupPriceEl = $('.pdetail--price-total');
  var totalPriceEl = $('.ProductDetailsPricing');
  var itemPrice = moneyToNumber(itemPriceEl.text());
  var itemCount = moneyToNumber(itemCountEl.val());
  var itemTotalPrice = itemCount * itemPrice;
  var groupTotalPrice = 0;

  // Trigger Group Update
  groupUpdateEl.click();
  groupTotalPrice = moneyToNumber(groupPriceEl.text());

  // Calculate Total Price
  totalPriceEl.text('Total: $' + Number(groupTotalPrice + itemTotalPrice) / 100);
}

/*$('select').on('change', function() {
  const headPrice = document.querySelector('.header--itemprice');
  const lowerPrice = document.querySelector('span.item--itemprice');
  const $lowerText = $(lowerPrice).text();
    $(headPrice).text($lowerText);
});*/

function moneyToNumber(moneyEl) {
  try {
    return Number(moneyEl.replace(/[^0-9\.]+/g,"").replace(/\D/g,''));
  } catch (err) {
    return 0;
  }
}

Answer 1

如果您根本不想接触其他函数并假设它也在 select 的更改事件中被调用。一个非常 hacky 的方式可能是这样的 -

$('select').on('change', function() {
setTimeout (function()
{
   const headPrice = document.querySelector('.header--itemprice');
   const lowerPrice = document.querySelector('span.item--itemprice');
   const $lowerText = $(lowerPrice).text();
   $(headPrice).text($lowerText);
}, 0);
});