如何确保加载特定的节点并与JavaScript/jQuery一起使用

Question

在酒店预订中，我试图通过使用CJS Chrome扩展名注入JavaScript，加载页面时的可用房间和价格，并且每当用户更改日期时。我尝试使用$(window).on("load", function)，等待所有资产加载，但这似乎没有100％的时间工作。有时我需要刷新页面几次才能使其正常工作。

这是我的代码。使用window.onload，我将执行函数grabInfo。

const grabInfo = () => {
  const availableData = window._globalTracking;
  let availableRooms = [];
  availableData.AvailableRooms.map(room => {
    let newRoomObj = {
      roomCode: room.RoomCode,
      rateCode: room.RateCode,
      roomName: room.RoomName,
      price: room.Price
    };
    availableRooms.push(newRoomObj);
  });
  console.log(
    `Check-in: ${availableData.ArrivalDtMMDDYYYY} Check-out: ${
      availableData.DepartDtMMDDYYYY
    }`
  );
  console.log('Rooms and Rates: ', availableRooms);
};
// when window has loaded everything, perform the following
$(window).on('load', function() {
  grabInfo();
  // listen for changes to dom (specifically the hotels cards changing to grab new data)
  let targetNodes = $('.thumb-cards_products');
  let myObserver = new MutationObserver(mutationHandler);
  let obsConfig = {
    childList: true,
    characterData: true,
    attributes: true,
    subtree: true
  };
  myObserver.observe(targetNodes[0], obsConfig);
});

我想也许我可以使用$('.thumb-cards_products').on("ready",function())，等待该目标元素加载，但这似乎不起作用。

当window.onready工作时，它不一致，$('.thumb-cards_products').on("ready",function())根本不起作用。最后，我正在尝试从window._globalTracking.AvailableRooms专门获取数据，这很可能是从异步API调用返回的。

Answer 1

尝试设置一个间隔，以对所需内容进行轮询，一旦可用，您就可以运行函数

function callback() {
   if ($('myElement').length) {
       clearInterval(token);
       grabInfo();
       let targetNodes = $('.thumb-cards_products');
       let myObserver = new MutationObserver(mutationHandler);
       let obsConfig = {
               childList: true,
               characterData: true,
               attributes: true,
               subtree: true
           };
       myObserver.observe(targetNodes[0], obsConfig);
}
const token = window.setInterval(callback, 200);