Q:

javascript how to execute one method after another

I have some animation in my code and I have faced a problem: When the user clicks the button more than once my animation will become faster and faster. To deal with this I have included the refresh page function (location.reload()) inside the function below.
Now I have a major problem: when I execute the button supposed the reload page function will be executed first then follow by day2 function then day1 function... the problem is now only the refresh page function is been executed.
How do I overcome this problem?
Javascript:
function day()
{
    location.reload().then(day2).then(day1);
}

HTML:
<input type="button" id="buttonThree" value="Day" onclick="day()"/>

A:

What you're doing doesn't work

Now I have a major problem: when I execute the button supposed the reload page function will be executed first then follow by day2 function then day1 function... the problem is now only the refresh page function is been executed.

Well, yeah. You refreshed the page. That involves leaving the page then re-entering it. Leaving the page means your JavaScript ends everything it's doing, and re-entering it means your JavaScript starts anew. JavaScript does not transcend page loads.
If you want your JavaScript to communicate with JavaScript on other pages, do so via other means: an #anchor in the URI, a query string in the URI, form data, sessionStorage, localStorage, or cookies - those are arranged in order of permanence and appropriateness, with cookies completely overdoing it, and #anchors and query strings being completely appropriate.
But that's completely unnecessary and inappropriate here. You shouldn't be doing what you're doing in the first place.
Let's address the actual problem of multiple button presses

I have some animation in my code and I have faced a problem: When the user clicks the button more than once my animation will become faster and faster.

Simply put, you shouldn't be doing what you're doing and this problem has a much simpler solution: disable the button, or set a boolean flag, in order to prevent the animation from running multiple times. Simply, don't allow the animation to run multiple times.
Option 1: Disabling the button
Disabling the button prevents it from sending onclick events, and signals to your user the button won't do anything for now. I recommend doing this if your button should not do anything longer whilst the animation is running, or whilst something else is happening.
The approach is to disable the button as soon as it's clicked. Later, once the tasks that button fired off (such as the animation) are finished, and it's OK to click the button again, you re-enable the button.
<input type="button" id="animateButton" value="Animate" onclick="animate()"/>

function animate() {
    // 'this' refers to the button, when the button's click event
    // calls this function
    this.disabled = true;
    startAnimation();
}

function startAnimation() {
    // run the animation
    // ...

    // once the animation is completed, via whatever means you want
    // (such as by jQuery's animate.complete callback),
    // re-enable the button like this:
    document.getElementById("animateButton").disabled = false;

    // or address the button some other appropriate way.
}

Option 2: Boolean flag, leaving the button enabled but doing nothing
This approach involves using a boolean flag to ignore clicks when the animation is running, instead of disabling the button outright.
This lets the user click the button still. It's useful if you want the button enabled for whatever reason, such as if you want the button doing other things on click - just without starting the animation every time.
If it's not going to do anything except start the animation, however, you probably should use option 1 instead to disable it, signalling the button won't do anything for now.
If you want this button to do other things, I suggest you have it call a different function - for example, doStuff() - and have that function call the animate() function below.
<input type="button" id="animateButton" value="Animate" onclick="animate()"/>

var canAnimate = true;

function animate() {
    if (!canAnimate) return; // do nothing if we're not allowed to animate yet
    canAnimate = false;
    startAnimation();
}

function startAnimation() {
    // run the animation
    // ...

    // once the animation is completed, via whatever means you want
    // (such as by jQuery's animate.complete callback),
    // set the flag to say we can animate again, like this:
    canAnimate = true;
}

