Question

情况！

这里是设置间隔的ID并进行检索时手头问题的样本重现。根据按钮的点击，会调用3个单独的事件。

事件之一是使用axios的POST请求。第二个过程基本上是一个等待POST请求完成的异步函数。

每个时间间隔都分配给该类的变量，并且在调用一个进程时，将清除另一个进程，以避免对django视图进行不必要的轮询。

单击每个过程按钮都可以很好地工作。

问题？

由于每个事件有3个单独的按钮，因此有可能再次单击其中一个按钮，这会触发另一个事件的发生并结束另一个事件 BUT ，连续单击同一按钮似乎没有结束该过程。

事件循环

单击按钮1。（一切正常。）
单击按钮2。（一切正常。每个人都很高兴。）
单击按钮3。（一切正常。再次。）

单击按钮1。（一切正常。）
单击按钮1。（一切正常。再次。）
单击按钮2。（进程1尚未清除。进程2同时启动。）
单击按钮1。（进程1和2同时运行。）<指发生的最后两个事件。

现在，由于某种原因，我们看到另一个事件循环似乎并没有在连续点击后结束。似乎ID已被覆盖，清除间隔一旦被覆盖，便无法再找到间隔。

示例代码

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代码。

<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>

Answer 1

Ouroborus的回答是正确的。在开始流程之前，我有一条线结束了其他流程，但没有结束正确的流程。打印ID有助于我了解ID已被覆盖。

  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'
        }
      } )
    }
  }

代码的其他部分保持不变。

设置事件调用的时间间隔ID更改

1 个答案: