如何避免通過setInterval的新執行覆寫變數值-有解無憂

我正在撰寫一個數字時鐘。如果用戶想要的話，時鐘中的秒數應該是隱藏的，女巫點擊按鈕。當我單擊按鈕時，秒數將被隱藏，但僅在下一秒之前。如果下一秒過去了，用戶的偏好會無意中設定為默認值。

let currentDate = new Date();
//assigning function above to a variable
let formattedDate = displayTime(currentDate);

//new time will be displayed every second
setInterval(() => {
  currentDate = new Date();
  formattedDate = displayTime(currentDate);

  formattedDate;
}, 1000);

function displayTime(dataObject) {
  const disDate = document.getElementById("date-elements");
  const disTime = document.getElementById("time-elements");

  //time-objects
  const parts = {
    //date elements:
    weekday: dataObject.getDay(),
    daysNumber: dataObject.getDate(),
    month: dataObject.getMonth()   1,
    year: dataObject.getFullYear(),
    //time elements:
    hours: dataObject.getHours(),
    minutes: dataObject.getMinutes(),
    seconds: dataObject.getSeconds(),
  };

  //adding "PM" or "AM" respectively depending on days time
  const formatAMPM = parts.hours >= 12 ? "PM" : "AM";
  const dayState = formatAMPM;
  parts.hours = parts.hours % 12;
  parts.hours ? parts.hours : 12;

  //appending zero if smaller than 10
  const dysNmbr =
    parts.daysNumber < 10 ? "0"   parts.daysNumber : parts.daysNumber;
  const mnth = parts.month < 10 ? "0"   parts.month : parts.month;

  const hrs = parts.hours < 10 ? "0"   parts.hours : parts.hours;
  const mins = parts.minutes < 10 ? "0"   parts.minutes : parts.minutes;
  const secs = parts.seconds < 10 ? "0"   parts.seconds : parts.seconds;

  //array of weekdays names
  const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];

  //determine the weekday
  const currentDayName = days[parts.weekday];

  //displayed elements
  disDate.innerHTML = `${currentDayName}, ${dysNmbr}/${mnth}/${parts.year}`;
  disTime.innerHTML = `${hrs} : ${mins} : ${secs} ${dayState}`;

  //hide and show seconds depending on users preferences
  let i = true;
  const btn = document.getElementById("btn");
  //if button is clicked
  btn.addEventListener("click", () => {
    if (i) {
      //hiding seconds
      disTime.innerHTML = `${hrs} : ${mins} ${dayState}`;
      btn.innerHTML = "Display Seconds";
      i = false;
    } else {
      //displaying seconds
      disTime.innerHTML = `${hrs} : ${mins} : ${secs} ${dayState}`;
      btn.innerHTML = "Hide Seconds";
      i = true;
    }
  });
}

<div id="date-elements"></div>
<div id="time-elements"></div>
<button id="btn">Hide seconds</button>

uj5u.com熱心網友回復：

放入函式btn.addEventListener("click"...內部displayTime會導致每次setInterval觸發時添加事件偵聽器處理程式，因此將時間顯示重置為其默認狀態，即顯示秒數。

每次單擊按鈕時，您還會將日期和時間資訊寫入頁面兩次。不會導致錯誤，但沒有必要。

有很多方法可以完成這項作業。在這種情況下，秒顯示被包裹在一個span標簽中：

`${hrs} : ${mins} <span hljs-subst">${(i)? "": "hideme"}">: ${secs}</span> ${dayState}`

...并且（現在是全域的）i變數用于包含（或不包含）隱藏秒的 CSS 選擇器：

${(i)? "": "hideme"}

這就是 Javascript——它是一種寫陳述句ternary operator的簡短方法。if..else

//hide and show seconds depending on users preferences
let i = true;
const btn = document.getElementById("btn");
//if button is clicked
btn.addEventListener("click", () => {
  if (i) {
    btn.innerHTML = "Display Seconds";
    i = false;
  } else {
    btn.innerHTML = "Hide Seconds";
    i = true;
  }
});

let currentDate = new Date();
//assigning function above to a variable
let formattedDate = displayTime(currentDate);

//new time will be displayed every second
setInterval(() => {
  currentDate = new Date();
  formattedDate = displayTime(currentDate);
}, 10);


function displayTime(dataObject) {
  const disDate = document.getElementById("date-elements");
  disTime = document.getElementById("time-elements");

  //time-objects
  parts = {
    //date elements:
    weekday: dataObject.getDay(),
    daysNumber: dataObject.getDate(),
    month: dataObject.getMonth()   1,
    year: dataObject.getFullYear(),
    //time elements:
    hours: dataObject.getHours(),
    minutes: dataObject.getMinutes(),
    seconds: dataObject.getSeconds(),
  };

  //adding "PM" or "AM" respectively depending on days time
  formatAMPM = parts.hours >= 12 ? "PM" : "AM";
  dayState = formatAMPM;
  parts.hours = parts.hours % 12;
  parts.hours ? parts.hours : 12;

  //appending zero if smaller than 10
  dysNmbr = parts.daysNumber < 10 ? "0"   parts.daysNumber : parts.daysNumber;
  mnth = parts.month < 10 ? "0"   parts.month : parts.month;

  hrs = parts.hours < 10 ? "0"   parts.hours : parts.hours;
  mins = parts.minutes < 10 ? "0"   parts.minutes : parts.minutes;
  secs = parts.seconds < 10 ? "0"   parts.seconds : parts.seconds;

  //array of weekdays names
  days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];

  //determine the weekday
  currentDayName = days[parts.weekday];

  //displayed elements
  disDate.innerHTML = `${currentDayName}, ${dysNmbr}/${mnth}/${parts.year}`;
  disTime.innerHTML = `${hrs} : ${mins} <span hljs-subst">${(i)? "": "hideme"}">: ${secs}</span> ${dayState}`;
}

.hideme {
  display: none;
}

<div id="date-elements"></div>
<div id="time-elements"></div>
<button id="btn">Hide seconds</button>

uj5u.com熱心網友回復：

我想我找到了你的問題...

  //displayed elements
  disDate.innerHTML = `${currentDayName}, ${dysNmbr}/${mnth}${parts.year}`;
  disTime.innerHTML = `${hrs} : ${mins} : ${secs} ${dayState}`;

這里。

您正在將innerHtml設定為以秒顯示默認格式，并且由于displayTime()每秒呼叫一次它只會覆寫設定的 innerHtml

  //hiding seconds
  disTime.innerHTML = `${hrs} : ${mins} ${dayState}`;

你可以這樣做：

let currentDate = new Date();
// declare hide-seconds preference flag outside of the loop.
let hideSeconds = false;
//assigning function above to a variable
let formattedDate = displayTime(currentDate);

//new time will be displayed every second
setInterval(() => {
  currentDate = new Date();
  formattedDate = displayTime(currentDate);

  formattedDate;
}, 1000);

//The main clock loop
function displayTime(dataObject) {
  const disDate = document.getElementById("date-elements");
  const disTime = document.getElementById("time-elements");

 //...

  //displayed elements depending on user preferences
  disDate.innerHTML = `${currentDayName}, ${dysNmbr}/${mnth}${parts.year}`;
  if(hideSeconds) {
    disTime.innerHTML = `${hrs} : ${mins} ${dayState}`;
  }else {
    disTime.innerHTML = `${hrs} : ${mins} : ${secs} ${dayState}`;
  }
  

  //set the hideSeconds flag depending on users preferences
  const btn = document.getElementById("btn");
  //if button is clicked
  btn.addEventListener("click", () => {
    if (!hideSeconds) {
      //hiding seconds
      btn.innerHTML = "Display Seconds";
      hideSeconds = true;
      disTime.innerHTML = `${hrs} : ${mins} ${dayState}`;
    } else {
      //displaying seconds
      btn.innerHTML = "Hide Seconds";
      hideSeconds = false;
      disTime.innerHTML = `${hrs} : ${mins} : ${secs} ${dayState}`;
    }
  });
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/505605.html

標籤：javascript html 变量

上一篇：(JS)當一個陣列的元素是其他陣列的鍵時，創建一個包含2個陣列的JSON

下一篇：在node.js中嘗試錯誤的登錄憑據后應用程式崩潰