Javascript - 单击按钮直到元素具有特定值(没有 while 循环)

Question

我目前正在尝试使用 JavaScript 自动化日期选择器。日期选择器包含一个标题元素，显示当前的月份和年份。

我想要实现的是一种连续点击日期选择器的“后退”按钮直到标题中的月份和年份与给定日期值的月份和年份相对应的方法。

起初我认为这可以通过一个简单的 while 循环来完成，但是因为 while 循环会卡住页面上所有其他 JavaScript 代码的执行，直到循环完成(并且后退按钮需要 JS 进行导航)，尝试这样做只会完全卡住页面。

这是我编写的(非工作)代码:

(function() {

  function checkDatePickerHeader(selector) {
    var date = document.querySelector(selector).innerText;
    date = new Date(date);
    return date;
  }

  var datePickerHeaderSelector = "#body > div.daterangepicker.dropdown-menu.opensleft.show-calendar > div.calendar.left > div > table > thead > tr:nth-child(1) > th.month";
  var datePickerBackButton = document.querySelector("#body > div.daterangepicker.dropdown-menu.opensleft.show-calendar > div.calendar.left > div > table > thead > tr:nth-child(1) > th.prev.available");

  var targetDate = new Date("2016-12-01");

  var datePickerDate;
  datePickerDate = checkDatePickerHeader(datePickerHeaderSelector);

  // click until correct year
  while (targetDate.getFullYear() < datePickerDate.getFullYear()) {
    datePickerBackButton.click();
    // update datePickerDate with new header value
    datePickerDate = checkDatePickerHeader(datePickerHeaderSelector);
  }

  // then click until correct month
  while (targetDate.getMonth() < datePickerDate.getMonth()) {
    datePickerBackButton.click();
    datePickerDate = checkDatePickerHeader(datePickerHeaderSelector);
  }

})();

我在调查后发现，将 while 循环重新工作为一个函数，然后使用超时调用所述函数可能会起作用，但我不确定如何重复调用该函数直到条件已经满足。

Answer 1

经过 friend 的一些建议和一些修补，我解决了这个问题! setInterval 确实是我在这种情况下需要使用的。这是工作代码:

(function() {

function checkDatePickerHeader(selector) {
    var date = document.querySelector(selector).innerText;
    date = new Date(date);
    return date;
}

// clear then set back button again, as it loses it when it's clicked
function resetBackButton() {
  datePickerBackButton = document.querySelector("#body");
  datePickerBackButton = document.querySelector("#body > div.daterangepicker.dropdown-menu.opensleft.show-calendar > div.calendar.left > div > table > thead > tr:nth-child(1) > th.prev.available");
}

function clickIfDatesDoNotMatch() {
  datePickerDate = checkDatePickerHeader(datePickerHeaderSelector);
  if (targetDate.getFullYear() < datePickerDate.getFullYear() || targetDate.getMonth() < datePickerDate.getMonth()) {
    datePickerBackButton.click();
    resetBackButton();
  } else {
    clearInterval(funcInterval);
  }
}

var datePickerHeaderSelector = "#body > div.daterangepicker.dropdown-menu.opensleft.show-calendar > div.calendar.left > div > table > thead > tr:nth-child(1) > th.month";
var datePickerBackButton = document.querySelector("#body > div.daterangepicker.dropdown-menu.opensleft.show-calendar > div.calendar.left > div > table > thead > tr:nth-child(1) > th.prev.available");

var targetDate = new Date("2016-12-01");

var datePickerDate;

var funcInterval = setInterval(clickIfDatesDoNotMatch, 1000);

})();

以上代码将每秒运行一次 clickIfDatesDoNotMatch 函数。如果日期不匹配，该函数将单击后退按钮(然后将后退按钮元素重新分配给 datePickerBackButton 变量，因为当单击后页面上的元素发生更改时它似乎无法跟踪它)，重复此过程直到日期匹配。