Can't clearInterval on my script, but why?

Viewed 44

I am trying to develop a simple turn game in JS, and i need to make those battle interactions to have some delay.

I am using setInverval to automatize everything after the player presses 'Battle!', but when checking if he's still alive for it, my clearInterval doesn't work - the process is still running in the background o_o

    const player = {
    hp: 0,
    state: true
}

const enemy = {
    hp: 100,
    state: true
}

function checkHp() {
    if(player.hp === 0 || enemy.hp === 0){
        const start = setInterval(function() {
            console.log('Checando turnos...'),
            battle()
        }, 2000)
        return start
    } else {
        clearInterval(start)
        console.log('Você precisa descansar!')
    }
}

function battle() {
    turn = 0
    turn = Math.floor(Math.random () * 2)
    console.log(turn)
}

checkHp()
2 Answers

As others have pointed out, start is out-of-scope when you are trying to use it to clear your interval. Let's break down what your code is doing:

function checkHp() {
    if(player.hp === 0 || enemy.hp === 0){
        // start is defined here in the scope of this block
        const start = setInterval(function() {
            console.log('Checando turnos...'),
            battle()
        }, 2000)
        // it is returned from the function here
        return start
    } else {
        // start has never been defined inside the else block, so it
        // has a value of undefined
        clearInterval(start)
        console.log('Você precisa descansar!')
    }
}

It might be helpful to read up about variable scoping in javascript.

Later in the script you call checkHp, but you don't save the return value, which is the interval handle if it entered the if block or undefined if you entered the else block, from which you don't return a value.

Now, what to do about this? It seems like you're probably trying to set up an interval that clears itself under certain conditions. You might check out this answer for some advice on that.

clearInterval can't work for undefined arguments. Put start variable out of if condition for clearInterval to work. From


function checkHp() {
    if(player.hp === 0 || enemy.hp === 0){
        const start = setInterval(function() {
            console.log('Checando turnos...'),
            battle()
        }, 2000)
        return start
    } else {
        clearInterval(start)
        console.log('Você precisa descansar!')
    }
}

to



function checkHp() {
// this line new added
const start;
    if(player.hp === 0 || enemy.hp === 0){
// this line will edited
        start = setInterval(function() {
            console.log('Checando turnos...'),
            battle()
        }, 2000)
        return start
    } else {
        clearInterval(start)
        console.log('Você precisa descansar!')
    }
}

clearInterval always works as setInterval is assigned with variables. So start variable should be assigned out of if condition first.

Javascript variables can have global scope and can also have local scope. Local scope can not touchable in global scope but global scope variable can be used in local scale. These scopes can be decided by function, if and other methods which have curly brackets({}). We can see one example,


let a = 'apple'

function printA() {

//will console apple in this local function
console.log(a)

return
}

printA();

Above example apple can be consoled in the function,


let a;

function asignA() {

a = 'banana'

return
}

printA();

//this will console apple still in global scale
//will not console banana 
//because asigning banana was declared in local scope
console.log(a)

in this example, assigned banana can not be consoled out of the function.

Related