时间戳

首页 > 解决方案 > 单击时杀死所有正在运行的 JavaScript 函数

javascript - 单击时杀死所有正在运行的 JavaScript 函数

问题描述

这是我之前问题的扩展，主要是出于好奇：Kill all running JavaScript functions with Timeouts on click

我有一个带有 3 个按钮和一个“结果”部分的网页：

<button id="b1" onclick="f1()">1st button</button>
<button id="b2" onclick="f2()">2nd button</button>
<button id="b3" onclick="f3()">3rd button</button>
<p id="result">"Here will be the result!"</p>

以下是 JavaScript 函数的片段。我还使用了网络工作者：

// The functions are similar, but the outputs are different

var worker;

function calcF1() {
    var answer;
    for (let i = 0; i < 1e9; i++) {
        // Do some complicated calculations
    }
    postMessage(answer);
}

function f1() {
    // TODO: Kill other running instances of all functions

    // Calling worker
    var cf1 = calcF1.toString();
    var code = cf1.substring(cf1.indexOf('{')+1, cf1.lastIndexOf('}'));
    var blob = new Blob([code], {type: 'application/javascript'});
    worker = new Worker(URL.createObjectURL(blob));

    worker.onmessage = message => {
        document.getElementById("result").innerHTML = "1st function";
    };
}

function calcF2() {
    var answer;
    for (let i = 0; i < 1e9; i++) {
        // Do some complicated calculations
    }
    postMessage(answer);
}

function f2() {
    // TODO: Kill other running instances of all functions

    // Calling worker
    var cf2 = calcF2.toString();
    var code = cf2.substring(cf2.indexOf('{')+1, cf2.lastIndexOf('}'));
    var blob = new Blob([code], {type: 'application/javascript'});
    worker = new Worker(URL.createObjectURL(blob));

    worker.onmessage = message => {
        document.getElementById("result").innerHTML = "2nd function";
    };
}

function calcF3() {
    var answer;
    for (let i = 0; i < 1e9; i++) {
        // Do some complicated calculations
    }
    postMessage(answer);
}

function f3() {
    // TODO: Kill other running instances of all functions

    // Calling worker
    var cf3 = calcF3.toString();
    var code = cf3.substring(cf3.indexOf('{')+1, cf3.lastIndexOf('}'));
    var blob = new Blob([code], {type: 'application/javascript'});
    worker = new Worker(URL.createObjectURL(blob));

    worker.onmessage = message => {
        document.getElementById("result").innerHTML = "3rd function";
    };
}

但是，如果用户点击b1然后立即点击b2，worker byf1将不会终止并继续运行。如果工人 from在 fromf1之前完成f2，result则将显示1st function然后替换为2nd function. 还有一种可能是工人f2先完成，在这种情况下result会显示2nd function然后被替换1st function。

我想要的是在每个函数的开头实现一个语句，该语句杀死/忽略/绕过当前正在运行的所有函数和/或所有 web 工作者，以便最终输出始终是与最后一个按钮相关联的输出用户按下。怎样才能最好地实施？

编辑：感谢您指出网络工作者。我最初的实现涉及网络工作者，但我忘了提及。问题已更新。

标签： javascriptfunction

解决方案

拆分函数，使它们只运行一段适度的时间，然后停止并将下一次运行推入堆栈的末尾setTimeout，以便其他函数有机会运行。在每个f1、f2和的开头f3，检查它们是否具有对当前运行函数的键的唯一引用，如果没有，则返回。

在以下代码段中，正在进行的f1函数被最近的调用覆盖f2：

let runningFunctionKey;
function f1(key, start = 0) {
  if (!key) {
    runningFunctionKey = {}; // some unique reference
    key = runningFunctionKey;
  } else if (key !== runningFunctionKey) return;
  const until = start + 1e7;
  while (start < until) {
    if (start === 1e9) {
      console.log('f1 done');
      return;
    }
    start++;
  }
  console.log('f1 setting timeout');
  setTimeout(f1, 0, key, start);
}
function f2(key, start = 0) {
  if (!key) {
    runningFunctionKey = {}; // some unique reference
    key = runningFunctionKey;
  } else if (key !== runningFunctionKey) return;
  const until = start + 1e7;
  while (start < until) {
    if (start === 1e9) {
      console.log('f2 done');
      return;
    }
    start++;
  }
  console.log('f2 setting timeout');
  setTimeout(f2, 0, key, start);
}
f1();
setTimeout(f2, 500);

推荐阅读