时间戳

首页 > 解决方案 > 为什么我不能从函数中更改这个全局变量？(JavaScript)

javascript - 为什么我不能从函数中更改这个全局变量？(JavaScript)

问题描述

简单的倒计时项目。

期望的结果：

  1. 全局变量确定默认时间。
  2. 然后滑块值覆盖该变量。

问题：滑块值在本地更改，但全局值保持不变。

我整天都在看关于变量范围的教程，但仍然看不出有什么问题，因为：

const change = slider.addEventListener('change', setMins)

function setMins() {
    initialMinutes = slider.value
}

我也尝试过window.variable这里和那里无济于事。我希望有人能帮帮忙。这变得难以确定范围。

const countdown = document.getElementById('countdown')
const slider = document.getElementById('slider')
const startBtn = document.getElementById('btn-startStop')
const resetBtn = document.getElementById('btn-reset')


// Event Listeners
const change = slider.addEventListener('change', setMins)
const start = startBtn.addEventListener('click', startStop)
const reset = resetBtn.addEventListener('click', resetApp)

// Time
var initialMinutes = 15
countdown.innerHTML = initialMinutes+':00'
const initialDuration = initialMinutes * 60
let time = initialMinutes * 60

let interval = null
let status = 'stopped'

function updateCountdown() {

  const minutes = Math.floor(time / 60)
  let seconds = time % 60
  seconds = seconds < 10 ? '0'+ seconds : seconds

  if( time < 1) {
    clearInterval(interval)
    startBtn.innerHTML = 'START'
    status = 'stopped'
    countdown.innerHTML = `00:00`
  } else {
    countdown.innerHTML = `${minutes}:${seconds}`
    time--;
  }
}

function startStop() {
  if(status === 'stopped') {   
    interval = setInterval(updateCountdown, 50)
    startBtn.innerHTML = 'STOP'
    status = 'running'
  } else {
    clearInterval(interval)
    startBtn.innerHTML = 'START'
    status = 'stopped'
  }
}

function setMins() {
    initialMinutes = slider.value
    countdown.innerHTML = slider.value+':00'
}
function resetApp() {
  clearInterval(interval);
  document.getElementById('countdown').innerHTML = '00:00'
  startBtn.innerHTML = 'START'
  status = 'stopped'
}

为了清楚起见，包含 Codepen 链接： https ://codepen.io/donseverino/pen/YzWBJYV

标签： javascriptglobal-variablesscopes

解决方案

知道了！这不是范围问题，而是变量分配问题。 updateCountdown()用途time和time = initialMinutes * 60

我认为更改initialMinutes会自动更改其内部值，time但事实并非如此。

在函数内部重新分配time可以解决它。

function setMins() {   
    initialMinutes = slider.value
    time = initialMinutes * 60
}

推荐阅读