How to make function execute only once in JS / JQuery

Question

i have a structure like this :

// App.js
var APP = {
    viewIndex: function(){
        EVT.doSomething();
    },

    // Another function below
}

// Event.js

var EVT = {
    doSomething: function(){
        deleteField();

        function deleteField(){
            $("body").on("click", "#btn", function(){
                console.log("Clicked");
            })
        }
    }
}

my project is SPA wannabe, so when i want to change the page, it must execute some function inside App.js , but my problem is, when i call APP.viewIndex() (when i go to Index, go back, and go to index again(without refreshing page) ) , the function inside EVT -> doSomething() is execute twice, so i have no idea how to prevent it,

in my console i got this :

Clicked

Clicked

*sorry if my explanation is a bit complicated

hope you guys can help me out of this problem :D

thanks

Answer 1

Use a property to remember if you already called deleteField() .

var EVT = {
    didSomething: false,
    doSomething: function(){
        if (!this.didSomething) {
            deleteField();
            this.didSomething = true;
        }
        function deleteField(){
            $("body").on("click", "#btn", function(){
                console.log("Clicked");
            })
        }
    }
}