更新动态更改以获取数据

Question

我现在陷入困境。我创建了一个函数来控制使用毫秒到秒、分钟和小时的计算来获取数据的频率，这似乎工作正常。

我一直在解决的问题是在获取数据时以及用户是否想要将间隔从 5 秒更改为 10 分钟或 1 小时。由于某种原因，数据的获取时间延长至 1 秒。有人可以帮忙吗？

请参阅我的 setupDynamicIntervalChange() 函数：

const setupDynamicIntervalChange = (input,select) =>{

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

        if(isValidInterval(intervalValue, selectedInterval)){
            document.querySelector('.interval-Btn');
            return
        }

    });

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

        if(isValidInterval(intervalValue, selectedInterval)){
            document.querySelector('.interval-Btn');
        }
    });

    fetchData()
}

请参阅 JS fiddle 上的完整代码

https://jsfiddle.net/blaze92/gvcnp7j8/4/

请注意，此动态是完成此功能的最后一块拼图

我确实曾尝试过这一点，但它不能解决问题并导致用户输入和选择选项出现另一个问题

function refreshFetch(intervalMilliseconds) {
    if (refreshInterval) {
        clearInterval(refreshInterval);
        console.log('Previous refresh interval cleared');
    }

    refreshInterval = setInterval(() => {
        fetchData();
        console.log('Data fetched in refreshFetch');
    }, intervalMilliseconds);
}

document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector('.interval-input');
    const select = document.querySelector('.select-interval');
    const button = document.querySelector('.interval-Btn');

    setupDynamicIntervalChange(input, select);

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

        if (isValidInterval(intervalValue, selectedInterval)) {
            const intervalMilliseconds = intervalValue * (intervalLookup[selectedInterval] || 1000);
            fetchInterval = setInterval(fetchData, intervalMilliseconds);
            refreshFetch(intervalMilliseconds);
        }
    });
});

document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector('.interval-input');
    const select = document.querySelector('.select-interval');
    const button = document.querySelector('.interval-Btn');

    setupDynamicIntervalChange(input, select);

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

        if (isValidInterval(intervalValue, selectedInterval)) {
            const intervalMilliseconds = intervalValue * (intervalLookup[selectedInterval] || 1000);
            fetchInterval = setInterval(fetchData, intervalMilliseconds);
            refreshFetch(intervalMilliseconds);
        }
    });
});

Answer 1

我解决了这个问题。

const setupDynamicIntervalChange = (input, select, button) => {

    

    const stopFetching = () => {
        if (currentIntervalId) {
            clearInterval(currentIntervalId);
            console.log('Data fetching stopped.');
            currentIntervalId = null;  // Reset the interval ID
        }
    };

    const startFetching = (intervalMilliseconds) => {
        currentIntervalId = setInterval(() => {
            fetchData();
            console.log('Data fetched at interval:', intervalMilliseconds);
        }, intervalMilliseconds);
        console.log('Data fetching started at interval:', intervalMilliseconds);
    };

    const updateInterval = () => {
        const intervalValue = parseInt(input.value, 10);
        const selectedInterval = select.value;

        // Validate input
        if (isNaN(intervalValue) || !intervalLookup[selectedInterval]) {
            //console.log('Invalid input or selection. Interval not updated.');
            return;
        }

        const intervalMilliseconds = intervalValue * intervalLookup[selectedInterval];
        console.log('New interval in milliseconds:', intervalMilliseconds);

        // Stop fetching if already running
        stopFetching();

        // Start fetching with new interval
        startFetching(intervalMilliseconds);
    };

    // Event listeners to handle changes
    input.addEventListener('change', updateInterval);
    select.addEventListener('change', updateInterval);

    // Also set the interval when the button is clicked
    button.addEventListener('click', updateInterval);
};

我还删除了refreshFetch和清除间隔函数，因为不再需要它了。