Kevin Powell - Community•12mo ago

Javascript Intervals

Hello im trying to make a simple game where user chose a tool then use it and get items from that, but when i try to add intervals for mining im getting small issue. When i use tool with some id it works great but when i try to use that tool again (with same id) interval goes faster here is the code:

4 Replies

artusOP•12mo ago

let selectedMineId;
let remainingTime = 5;
let miningIntervals = {};
let remainingTimes = {};

function getFormattedTime(remainingTime) {
    const minutes = Math.floor(remainingTime / 60);
    const seconds = remainingTime % 60;
    const formattedTime = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    console.log("Getting Formatted Time Works")
    return formattedTime;
}

function useTool(tool) {
    if (miningIntervals[tool.id] > 0) {
        closeItemsWindow();
    } else if (!miningIntervals[tool.id]) {
        closeItemsWindow();
        let usedToolImg = document.querySelector(`#${tool.id} .tool_container img`)
        usedToolImg.classList.add("hidden_info_img");

        let selectedMine = document.querySelector(`#${selectedMineId}`)
        let mineHiddenInfo = selectedMine.querySelector(".hidden_info");
        let mineClaimButton = selectedMine.querySelector(".hidden_claim_button")

        remainingTimes[tool.id] = remainingTime;

        mineHiddenInfo.innerHTML += `
            ${usedToolImg.outerHTML}
            <p id="${tool.id}_remainingTime">${getFormattedTime(remainingTimes[tool.id])}</p>
        `;

        mineHiddenInfo.style.display = "block";

        miningIntervals[tool.id] = setInterval(() => {
            if (remainingTimes[tool.id] > 0) {
                remainingTimes[tool.id] -= 1;
                let updatedTime = getFormattedTime(remainingTimes[tool.id]);
                document.getElementById(`${tool.id}_remainingTime`).innerText = updatedTime;
            } else {
                mineHiddenInfo.innerHTML = '';
                mineHiddenInfo.style.display = "none";
                mineClaimButton.style.display = "block";

                delete miningIntervals[tool.id];
                delete remainingTimes[tool.id];
            }
        }, 1000);
    }
}

let selectedMineId;
let remainingTime = 5;
let miningIntervals = {};
let remainingTimes = {};

function getFormattedTime(remainingTime) {
    const minutes = Math.floor(remainingTime / 60);
    const seconds = remainingTime % 60;
    const formattedTime = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    console.log("Getting Formatted Time Works")
    return formattedTime;
}

function useTool(tool) {
    if (miningIntervals[tool.id] > 0) {
        closeItemsWindow();
    } else if (!miningIntervals[tool.id]) {
        closeItemsWindow();
        let usedToolImg = document.querySelector(`#${tool.id} .tool_container img`)
        usedToolImg.classList.add("hidden_info_img");

        let selectedMine = document.querySelector(`#${selectedMineId}`)
        let mineHiddenInfo = selectedMine.querySelector(".hidden_info");
        let mineClaimButton = selectedMine.querySelector(".hidden_claim_button")

        remainingTimes[tool.id] = remainingTime;

        mineHiddenInfo.innerHTML += `
            ${usedToolImg.outerHTML}
            <p id="${tool.id}_remainingTime">${getFormattedTime(remainingTimes[tool.id])}</p>
        `;

        mineHiddenInfo.style.display = "block";

        miningIntervals[tool.id] = setInterval(() => {
            if (remainingTimes[tool.id] > 0) {
                remainingTimes[tool.id] -= 1;
                let updatedTime = getFormattedTime(remainingTimes[tool.id]);
                document.getElementById(`${tool.id}_remainingTime`).innerText = updatedTime;
            } else {
                mineHiddenInfo.innerHTML = '';
                mineHiddenInfo.style.display = "none";
                mineClaimButton.style.display = "block";

                delete miningIntervals[tool.id];
                delete remainingTimes[tool.id];
            }
        }, 1000);
    }
}

Jochem•12mo ago

I'm guessing you're not clearing the interval the interval will keep triggering until you call clearInterval, passing it the return value of the initial setInterval call (so miningIntervals[tool.id] in this case) just calling delete on miningIntervals[tool.id] won't work, that just destroys the value you can use to clear the interval, so you'd want to change that line to something like

clearInterval(miningIntervals[tool.id]);
delete miningIntervals[tool.id];

clearInterval(miningIntervals[tool.id]);
delete miningIntervals[tool.id];

artusOP•12mo ago

i have used clearInterval() but placed it in wrong line tysm ❤️

Jochem•12mo ago

no worries, glad to help 🙂

Gaming

Programming

Javascript Intervals