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

时间:2019-01-19 02:44:13

标签: javascript jquery async-await axios setinterval

情况!

这里是设置间隔的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>

1 个答案:

答案 0 :(得分:0)

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

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