Brtdku

Situation!

Here is a sample reproduction of the problem at hand with setting the interval's Id and retrieving the same. There are 3 separate events that are called based on button clicks.

One of the event is a POST request using axios. The second process is basically an async function awaiting the POST request to complete.

Each interval is assigned to a variable of the class, and when a process is called the other process's are cleared to avoid unnecessary polling to the django view.

All works great with single clicks of each process button.

The Problem?

SInce there are 3 separate buttons for each event, there might be a possibility to click on one of the buttons again which triggers another event to take place and also ends the other event, BUT , the process doesn't seem to end on a consecutive click of the same button.

Event Loop

• Button 1 is clicked. ( All works good. )


• Button 2 is clicked. ( All works good. Everyone is happy. )


• Button 3 is clicked. ( All works good. Again. )

• Button 1 is clicked. ( All works good. )


• Button 1 is clicked. ( All works good. Again. )



• Button 2 is clicked. ( Process 1 hasn't been cleared. Process two has started concurrently. )




• Button 1 is clicked. ( Process 1 and 2 are running concurrently. ) < Referring to the last two events that took place.

Now as we have seen for some reason the other event loop doesn't seem to end on consecutive clicks. It looks like the ID's are overwritten and the clear interval can't find the interval anymore once they have been overwritten.

Sample code

class Handler {



    constructor () {

      this.interval1 = 0;

      this.interval2 = 0;

      this.interval3 = 0;

    }



    getToken(name) {

        var cookieValue = null;

            if (document.cookie && document.cookie !== '') {

                var cookies = document.cookie.split(';');

                for (var i = 0; i < cookies.length; i++) {

                    var cookie = jQuery.trim(cookies[i]);

                    // Does this cookie string begin with the name we want?

                    if (cookie.substring(0, name.length + 1) === (name + '=')) {

                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));

                        break;

                    }

                }

            }

          return cookieValue;

    }



    process_one () {

      clearInterval(this.interval2);





      this.interval1 = setInterval(function() {

        console.log(" Polling 1. ")

      },300);

    }



    async process_two () {

      clearInterval(this.interval1);





      var scope_obj = this;

      this.interval2 = setInterval(async function() {

        console.log(" Polling 2. ");

        var data = await scope_obj.process_three();

      }, 500);

    }



    async process_three () {

      return axios( {

        url: "",

        data:{"data":"LOL"},

        headers :  {

          'X-CSRFToken': this.getToken('csrftoken'),

          'Content-Type': 'application/x-www-form-urlencoded'

        }

      } )

    }

  }



  let event = new Handler();



    $("#p1").click(function() {

      console.log("P1 started.")

      event.process_one ();

    })



    $("#p2").click(async function() {

      console.log("P2 started.")

      event.process_two ();



    })



    $("#p3").click(function() {

      console.log("P3 started.")

      event.process_three ();

    })

HTML Code.

<div class="row">

    <div class="col-lg-12">

      <button type="button" class="btn btn-warning" id="p1">P1</button>

      <button type="button" class="btn btn-warning" id="p2">P2</button>

      <button type="button" class="btn btn-warning" id="p3">P3</button>

    </div>

  </div>

You are indeed overwriting the ID.

When you click P1 the second time, you don't clear the related interval timer before overwriting interval1. The earlier instance continues to run in the background but, since you overwrote interval1, you lost the ID for it. At that point you have two interval timers running for P1 but you only have an ID for the most recent one.

When you click P2, it stops the recent P1 interval but the earlier P1 interval is still running in the background.

The answer from Ouroborus was correct. Before I started the process I had a line that ends the other process but wasn't ending the correct process. Printing out the ID helped me understand that the ID's were being overwritten.

  class Handler {



    constructor () {

      this.interval1 = 0;

      this.interval2 = 0;

      this.interval3 = 0;

    }



    getToken(name) {

        var cookieValue = null;

            if (document.cookie && document.cookie !== '') {

                var cookies = document.cookie.split(';');

                for (var i = 0; i < cookies.length; i++) {

                    var cookie = jQuery.trim(cookies[i]);

                    // Does this cookie string begin with the name we want?

                    if (cookie.substring(0, name.length + 1) === (name + '=')) {

                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));

                        break;

                    }

                }

            }

          return cookieValue;

    }



    process_one () {

      clearInterval(this.interval2); // Clear the other interval.

      clearInterval(this.interval1); // Clear the current interval.



      this.interval1 = setInterval(function() {

        console.log(" Polling 1. ")

      },300);

    }



    async process_two () {

      clearInterval(this.interval1); // Clear the other interval.

      clearInterval(this.interval2); // Clear the current interval.



      var scope_obj = this;

      this.interval2 = setInterval(async function() {

        console.log(" Polling 2. ");

        var data = await scope_obj.process_three();

      }, 500);

    }



    async process_three () {

      return axios( {

        url: "",

        data:{"data":"LOL"},

        headers :  {

          'X-CSRFToken': this.getToken('csrftoken'),

          'Content-Type': 'application/x-www-form-urlencoded'

        }

      } )

    }

  }

The other parts of the code remain the same.