javascript - 如果用户使用表单元素进行迭代，则停止/暂停执行

Question

我是 js 新手， 我正在为翼装飞行员(航迹分析仪)开展项目。

在页面上，我实现了范围选择器和一些图表，因此用户可以选择他想要分析的数据部分。

问题是 - 有时用户会从两个边界更改范围，因此在这种情况下他会等待完成第一次计算和第二次计算。

问题是 - 如果用户使用范围 slider 进行迭代，是否有任何方法可以停止执行代码块？ 如果您能提供完成此任务的指导，我将不胜感激。

您可以访问this page并尝试它以更好地理解 - 尝试更改范围两次而不等待图表和数据更新。

编辑: 当用户完成范围 slider 时，它会调用回调函数，我在其中实现了计算和图表更新。 范围选择器也有 onChange 回调。那么有什么办法可以停止执行一个功能从另一个功能？或者我应该用参数调用相同的函数并做一些事情？

范围 slider 初始化:

  $(document).ready(function() {

    $("#range_selector").ionRangeSlider({
      min: max_height,
      max: 0,
      type: 'double',
      step: 50,
      prettify: false,
      hasGrid: true,
      from: max_height,
      to: 0,
      onFinish: function (obj) {      // callback is called on slider action is finished
        range_from = obj.fromNumber;
        range_to = obj.toNumber;
        set_chart_data();
      }
    });

这是计算循环:

    for (var index in charts_data) {

      var current_point = charts_data[index];
      var point = {};

      isLast = true;

      if (current_point.elevation <= max_val && current_point.elevation >= min_val) {

        point = clone(current_point);

        // Корректировка выбранного диапазона
        if (isFirst) {

          isFirst = false;
          if (current_point.elevation != max_val && charts_data.hasOwnProperty(index-1)) {

            point.elevation_diff = max_val - current_point.elevation;

            var k = point.elevation_diff / current_point.elevation_diff;

            point.distance = Math.round(current_point.distance * k);
            point.fl_time = Math.round(current_point.fl_time * k);
          }
        }

        isLast = false;

        dist += point.distance;
        elev += point.elevation_diff;

        elev_data.push([fl_time, Math.round(elev)]);
        dist_data.push([fl_time, dist]);

        heights_data.push([fl_time, Math.round(point.elevation)]);
        h_speed.push([fl_time, point.h_speed]);
        v_speed.push([fl_time, point.v_speed]);

        gr.push([fl_time, point.glrat]);

        fl_time += point.fl_time;

        min_h_speed = min_h_speed == 0 || min_h_speed > point.h_speed ? point.h_speed : min_h_speed;
        max_h_speed = max_h_speed == 0 || max_h_speed < point.h_speed ? point.h_speed : max_h_speed;

        min_v_speed = min_v_speed == 0 || min_v_speed > point.v_speed ? point.v_speed : min_v_speed;
        max_v_speed = max_v_speed == 0 || max_v_speed < point.v_speed ? point.v_speed : max_v_speed;

        min_gr = min_gr == 0 || min_gr > point.glrat ? point.glrat : min_gr;
        max_gr = max_gr == 0 || max_gr < point.glrat ? point.glrat : max_gr;
      }

      if (isLast && elev_data.length > 0) {
        if (current_point.elevation <= min_val && charts_data.hasOwnProperty(index - 1)) {

          point = clone(current_point);
          prev_point = charts_data[index - 1];

          point.elevation_diff = prev_point.elevation - min_val;
          var k = point.elevation_diff / current_point.elevation_diff;

          point.fl_time = current_point.fl_time * k;
          point.elevation = min_val;
          point.distance = Math.round(current_point.distance * k);

          dist += point.distance;
          elev += point.elevation_diff;

          elev_data.push([fl_time, Math.round(elev)]);
          dist_data.push([fl_time, dist]);

          heights_data.push([fl_time, Math.round(point.elevation)]);
          h_speed.push([fl_time, point.h_speed]);
          v_speed.push([fl_time, point.v_speed]);

          gr.push([fl_time, point.glrat]);
        }
        break;
      }
    }

Answer 1

注意:
我没有看过你的链接，只是因为我很谨慎。您可能应该设置 a fiddle ，你当然应该为你的问题添加一个最小的代码示例。仅有链接是不够的。

简短的回答是不。

JavaScript 是单线程的。它在浏览器的一个线程中运行，因此任何响应任何操作(由用户或一段代码执行)的代码都无法运行，直到引擎在任何给定时间完成它正在做的事情。
当一个函数被调用时，唯一可以阻止该函数运行的是:语法错误、浏览器(脚本花费的时间太长，浏览器可以终止它)或函数返回(正常完成)。当一个函数在工作时，不能调用任何函数。并发是不可能的。无论您有什么事件监听器，回调都会排队，只有在函数返回后才会被调用。

不过，也有一些好消息。如果计算真的需要，就像你说的 1 秒，那么你可以创建 a worker .您可以将繁重的工作交给这个工作人员，并向实例添加一个事件监听器，用于监听消息。编写工作程序，以便在完成后将消息发送回 man JS 线程。在 worker 运行的同时，主 JS 线程可以自由进行。

要在 worker 忙于执行一些复杂的计算时停止它，您只需调用 terminate 方法:

(function()
{
    var w = new Worker('worker/code/script.js'),
        handler = function()
        {
            w.terminate();
        },
        btn = document.querySelector('#stopBtn');
    btn.addEventListener('click', handler, false);
    w.onmessage = function(e)
    {
        btn.removeEventListener('click', handler, false);//listener not needed anymore
        console.log('Worker finished, its response was: ', e.data);
        this.terminate();//kill worker
    };
    //init worker
    w.postMessage('Data to pass to worker here');
}());