Javascript - 单击按钮，直到元素具有特定值（没有while循环）

Question

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

我想要实现的是一种连续点击日期选择器＆＃34;返回＆＃34;按钮，直到标题中的月份和年份对应于给定日期值的月份和年份。

起初我认为这可以通过一个简单的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

经过朋友的一些建议和一些修补，我解决了这个问题！ 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变量，因为它似乎在单击后在页面上更改元素时会丢失它），重复这个过程直到日期匹配。