Question

我有一个包含3个按钮和＆＃34;结果的网页＆＃34;部分：

<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函数的片段：

var to;

function f1() {
    // Kill other running instances of all functions
    to = setTimeout(() => {
        document.getElementById("result").innerHTML = "1st function";
    }, 10000 * Math.random());
}

f2和f3基本相同，但在暂停不到10秒后打印不同的输出。

但是，如果用户点击b1然后立即点击b2，则innerHTML中的f1可能会在之后运行>在f2中，输出为1st function，而不是2nd function。

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

Answer 1

如果之前已经按过一次，请使用布尔值来停止运行该功能。

<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.android.mediarecorder"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECORD_VIDEO" />
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.front" android:required="false" />

    <application
        android:allowBackup="true"
        android:fullBackupContent="true"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">
      <activity
            android:name="com.example.amokh.videorecorder02.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

var pause = false;
var result = document.getElementById("result");

function genericF(text) {
    if(pause) return;
    pause = true;
    // Kill other running instances of all functions
    setTimeout(() => {
        result.innerHTML = text;
        pause = false;
    }, 10000 * Math.random());
}

Answer 2

您可以设置所有函数都可以看到的全局变量，并使用它来存储setTimeout()的返回值。你已经这样做了。您现在需要做的就是在每个函数的头部调用clearTimeout()以防止先前的调用执行。

效果将是最后一个按下的按钮将是唯一获胜的按钮。

＆＃13;

var to;

function f1() {
  clearTimeout(to)
  // Kill other running instances of all functions
  to = setTimeout(() => {
    document.getElementById("result").innerHTML = "1st function";

  }, 3000 * Math.random());
}

function f2() {
  clearTimeout(to)
  // Kill other running instances of all functions
  to = setTimeout(() => {
    document.getElementById("result").innerHTML = "2nd function";

  }, 3000 * Math.random());
}

function f3() {
  clearTimeout(to)
  // Kill other running instances of all functions
  to = setTimeout(() => {
    document.getElementById("result").innerHTML = "3rd function";

  }, 3000 * Math.random());
}

＆＃13;

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

＆＃13;

使用Timeouts点击所有正在运行的JavaScript函数

2 个答案: