There are a couple of issues here: specifically, the `this.myMethod` function is not recognized as a function, and the click event added by the `addEventListener` function

Question

There are a couple of issues here: specifically, the `this.myMethod` function is not recognized as a function, and the click event added by the `addEventListener` function

I am currently attempting to create a timer using vue.js, but I am encountering some issues with my methods section:

methods: {         
    saveRunningMethod() {
        var runningData = {
            duration: `${this.hour} : ${this.minute} : ${this.second}`,
            username: this.$store.state.user.username
        }
        this.$store.dispatch('saveRunning' , runningData)
        console.log(runningData);
    },
    startTimer(){     
        this.isTimerStart = true;
        var timer = window.setInterval(() => {

           var e = document.getElementById("stopBtn")
           e.addEventListener("click", function(){ 
               clearInterval(timer) 
               this.isTimerStart = false;
               console.log("lets Save it")
               this.saveRunningMethod()
               });

           if(this.mSecond < 9)
                this.mSecond +=1
            else
                this.mSecond=0

           if(this.mSecond==9)
                this.second +=1                

            if(this.second>59)                   
                this.second=0

            if(this.second==59)
                this.minute +=1

            if(this.minute>59)
                this.minute=0

            if(this.minute==59)
                this.hour+=1             

    },100);

    }
}

In the code above,

e.addEventListener("click", function(){

is used to stop the timer when clicking on the 'stop' button. However, this method seems to be running multiple times and resulting in multiple executions of console.log as depicted in this image:

Another issue I am facing is with the line: this.saveRunningMethod(). When I try to call this method within my startTimer() method, I receive an error stating "this.saveRunningMethod() is not a function."

Finally, for the timer setup utilizing setInterval, if you have any suggestions for a more efficient solution, your input would be greatly appreciated.

UPDATE: Including my HTML component below:

<div class="row p-2 m-3 mt-3">
        <div class="col-12 p-0 animated fadeInUp mt-3">
            <p class="text-center">Your last record was : 00:00:00</p>
        </div>
        <div class="col-12 p-0 animated fadeInUp mt-3">
            <h1 class="text-center timer">
                {{this.hour}}:{{this.minute}}:{{second}}:{{mSecond}}
            </h1>
        </div>
    </div>
    <div class="row p-2 mt-3" v-bind:class="[this.isTimerStart==false ? 'show' : 'hide']">
        <div class="col-12 p-0 animated tada text-center">
            <button class="btn-link timerImg" @click="startTimer()">
                <img class="img-fluid timerImg" src="../../static/timerStart.png" />
                <p>Start</p>
            </button>
        </div>
    </div>

    <div class="row p-2 mt-3" v-bind:class="[this.isTimerStart ? 'show' : 'hide']">
        <div class="col-12 p-0 animated tada text-center">
            <button id="stopBtn" class="btn-link timerImg">
                <img class="img-fluid timerImg" src="../../static/timerStop.png" />
                <p>Stop</p>
            </button>
        </div>
    </div>

Thank you for your assistance.

javascript timer vue.js vuejs2

Answer 1

Answer №1

As per the information from a reliable source, the functionality of window.setInterval() is as follows:

It repeatedly calls a specified function with a fixed time delay between each call.

When the method startTimer() is triggered, it attaches a click event listener to the stop button every 100 milliseconds. Thus, if there is a 3.3-second delay before clicking the stop button after page load, the click event will have been added to the button 33 times:

var timer = window.setInterval(() => {

    var e = document.getElementById("stopBtn")
    e.addEventListener("click", function() {
        // This code will run 33 times on stop button click.
    })
    ...
}, 100)

If there is a 5.4-second delay prior to clicking the stop button after loading the page, the click event will have been attached to the button 54 times!

Rather than utilizing window.setInterval(), it is recommended to use window.setTimeout(). As stated by this resource, this is its purpose:

It executes a code snippet or a function after a specified delay.

In essence, window.setTimeout() sets up a timer that runs only once after a user-specified delay.

Regarding the error mentioning "

this.saveRunningMethod() is not a function

," the issue arises due to context changes within the callback function passed to addEventListener(). The value of this switches to the button itself rather than your object. To circumvent this problem, an arrow function can be passed to addEventListener(), maintaining the context unchanged (thus keeping this as your object inside the arrow function):

window.setTimeout(() => {
    var e = document.getElementById("stopBtn")
    e.addEventListener("click", () => {
        this.isTimerStart = false;
        console.log("Saving now");
        this.saveRunningMethod();
    });
}, 100)

Answer 2

As per the information from a reliable source, the functionality of window.setInterval() is as follows:

It repeatedly calls a specified function with a fixed time delay between each call.

When the method startTimer() is triggered, it attaches a click event listener to the stop button every 100 milliseconds. Thus, if there is a 3.3-second delay before clicking the stop button after page load, the click event will have been added to the button 33 times:

var timer = window.setInterval(() => {

    var e = document.getElementById("stopBtn")
    e.addEventListener("click", function() {
        // This code will run 33 times on stop button click.
    })
    ...
}, 100)

If there is a 5.4-second delay prior to clicking the stop button after loading the page, the click event will have been attached to the button 54 times!

Rather than utilizing window.setInterval(), it is recommended to use window.setTimeout(). As stated by this resource, this is its purpose:

It executes a code snippet or a function after a specified delay.

In essence, window.setTimeout() sets up a timer that runs only once after a user-specified delay.

Regarding the error mentioning "

this.saveRunningMethod() is not a function

," the issue arises due to context changes within the callback function passed to addEventListener(). The value of this switches to the button itself rather than your object. To circumvent this problem, an arrow function can be passed to addEventListener(), maintaining the context unchanged (thus keeping this as your object inside the arrow function):

window.setTimeout(() => {
    var e = document.getElementById("stopBtn")
    e.addEventListener("click", () => {
        this.isTimerStart = false;
        console.log("Saving now");
        this.saveRunningMethod();
    });
}, 100)

There are a couple of issues here: specifically, the `this.myMethod` function is not recognized as a function, and the click event added by the `addEventListener` function

Answer №1

Similar questions

Is it possible to display two menus on opposite sides of the screen while using Google Maps?

evt.target consistently returns the initial input within the list of inputs

Transmitting a jQuery array from the client to the server using AJAX in

Transforming the response.render method in Express to be a promise-enabled

What is the best way to handle JSON data errors when a value is undefined?

Changing a class using JavaScript: Adding and removing class dynamics

Enable Row Editing with a Click in Material Table

The NodeJS module 'request' is producing symbols instead of expected HTML content

Tips for using multiple Angular directive modules in PprodWant to enhance your Pprod experience by

Set the display property of all child elements within the DIV to none

Utilizing Asynchronous Functions within a Loop

"Enscroll – revolutionizing the way we scroll in

Understanding the source of an useEffect's trigger to create a conditional statement

The JavaScript in the Laravel file isn't functioning properly, but it works perfectly when incorporated via CDN

Utilize Express.js to seamlessly stream and process uploaded files with formidable and gm, ensuring a streamlined process without

Determine which children should be displayed in a Kendo treeview based on the field titled "ParentId"

Resolving the Enigma: Querying jQuery for Real-Time Validation and

Transform Vue.js into static HTML output

Unable to locate the root element for mounting the component in Cypress with React

Signal for a complete 360 degree rotation of an image