处理天气地图 API 的刷新Fetch() 函数中的 setupIntervalButton() 问题

Question

我目前正在开发天气图 API，并在尝试在refreshFetch() 函数中使用 setupIntervalButton() 函数时遇到了问题。具体来说，我无法确保按钮正确呈现并且在执行refreshFetch()函数之前正确设置间隔。

这是 setupIntervalButton() 的代码：

function setupIntervalButton(input,select,button){
    console.log('Setting up event listener'); // Debugging line
    console.log('Button element inside setup:', button); // Debugging line
    
    button.addEventListener('click', () =>{
        const intervalValue = input.value;
        const selectedInterval = select.value

        if (!intervalValue && !selectedInterval) {
            alert("Please provide numeric value and select interval type");
        } else if (!intervalValue) {
            alert("Please provide numeric value for interval");
        } else if (!selectedInterval) {
            alert("Please select interval type");
        } else{
            console.log(`Interval set to ${intervalValue} ${selectedInterval}`);
            
        }

        if(selectedInterval === "Seconds"){
            console.log(intervalValue)
            return intervalValue * 1000
        }
        else if(selectedInterval === "Minutes"){
            console.log(intervalValue)
            return intervalValue * 60000
        }
        else if(selectedInterval === "Hours"){
            console.log(intervalValue)
            return intervalValue * 60 * 60 * 1000
        }else{
            return intervalValue * 1000
        }

    })
}

function refreshFetch(){
    window.setInterval(() =>{
        fetchData()
        console.log('url fetched')
    },setupIntervalButton())

}

问题：主要问题是setupIntervalButton()在执行refreshFetch()函数之前没有渲染按钮。因此，间隔设置不正确。

您可以在此处查看 JS Fiddle 代码：https://jsfiddle.net/blaze92/u9zs2qy8/

问题：

1.如何确保setupIntervalButton()正确设置执行refreshFetch()之前的间隔？

2.有没有办法让setupIntervalButton()返回间隔时间，以便可以在refreshFetch()中使用？

Answer 1

您在 setInterval() 内部调用 setupIntervalButton()，但 setupIntervalButton() 不会返回间隔值，而是在按钮上设置一个事件侦听器，这不会立即为 setInterval() 提供间隔。

这是一个工作版本，我重构了一些代码以使其更加干燥。您实际上不需要设置函数。我会将其全部放入加载事件侦听器中

const intervalLookup = {
  Seconds: 1000,
  Minutes: 60000,
  Hours: 60 * 60 * 1000,
};

const input = document.getElementById('interval-input');
const select = document.getElementById('interval-select');
const button = document.getElementById('interval-button');


// Set up the button event listener and handle interval
const setupIntervalButton = (input, select, button) => {
  console.log('Setting up event listener');
  console.log('Button element inside setup:', button);

  button.addEventListener('click', () => {
    const intervalValue = input.value;
    const selectedInterval = select.value;

    if (!intervalValue && !selectedInterval) {
      alert('Please provide numeric value and select interval type');
      return;
    } else if (!intervalValue) {
      alert('Please provide numeric value for interval');
      return;
    } else if (!selectedInterval) {
      alert('Please select interval type');
      return;
    }

    console.log(`Interval set to ${intervalValue} ${selectedInterval}`);

    // Use the lookup table 
    const intervalMilliseconds = intervalValue * (intervalLookup[selectedInterval] || 1000); // Default to seconds

    console.log('Interval in milliseconds:', intervalMilliseconds);

    // Start the refreshFetch function since we have the interval
    refreshFetch(intervalMilliseconds);
  });
};

const refreshFetch = (intervalMilliseconds) => {
  setInterval(() => {
    fetchData();
    console.log('url fetched');
  }, intervalMilliseconds);
};

// Mock fetchData function
const fetchData = () => {
  console.log('Fetching data from API...');
};


setupIntervalButton(input, select, button);

<input id="interval-input" type="number" placeholder="Enter interval" />
<select id="interval-select">
  <option value="Seconds">Seconds</option>
  <option value="Minutes">Minutes</option>
  <option value="Hours">Hours</option>
</select>
<button id="interval-button">Set Interval</button>