JavaScript 定时器

2023-12-13

我正在尝试使以下 JavaScript 计时器只需单击一个按钮即可执行两个功能 - 一旦计时器启动,请单击;再次点击;它停止了。单击第三次,它会再次启动,依此类推。我在这里做错了什么?预先非常感谢您。

    <html>
<head>
    <script type="text/javascript">
        var c=0;
        var t;
        var timer_is_on=0;

        function timedCount()
        {
            document.getElementById('txt').value=c;
            c=c+1;
            t=setTimeout("timedCount()",1000);
        }

        function doTimer()
        {
            if (!timer_is_on)
            {
                timer_is_on=1;
                timedCount();
            }
        }

        function stopCount()
        {
            clearTimeout(t);
            timer_is_on=0;
        }
        function both(){
            doTimer();
            stopCount();
        }
    </script>
</head>

<body>
    <form>
        <input type="button" value="Start count!" onclick="doTimer" />
        <input type="text" id="txt" />
        <input type="button" value="Stop count!" onclick="stopCount()" />
    </form>
<p>
Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!" button to start the timer again.
</p>
</body>
</html>

您没有描述实际问题,所以我不太确定该如何回应,但这里有一些可能有用的注释。

timedCount 函数是准定时递归的。如果你喜欢的话这很酷连续传球风格,但没有必要,可能比 JavaScript 需要的更令人困惑,并且在没有尾递归堆栈清理的语言中会浪费一些资源(堆栈帧)(不知道 JS 是否有这样的功能或不是)。

由于这是一个重复的函数执行,您可以使用setInterval代替setTimeout,并有一个重复的函数调用来检查它是否应该增加并重新显示计数...如下所示:

var c=0;
var timer_is_on=false;

function displayCount() {
    document.getElementById('txt').value=c;
}

function count() {
    if(timer_is_on) {
        c=c+1;
        displayCount();
    }
}

var interval = setInterval(count,1000);

现在,解决问题的单按钮部分。假设有一个按钮:

<input type="button" value="Start count!" onclick="toggle" />

当我们点击它时,我们希望“值”属性发生变化,并且我们希望它翻转timer_is_on多变的。让我们创建一个执行所有这些操作的函数:

function toggle() {
    if(timer_is_on) {
       timer_is_on = false;
       this.value = "Start count!";  // `toggle` is invoked by the button's event handler, so `this` is the button
    } else {
       timer_is_on = true;
       this.value = "Stop count!";
    }                   
}

所以... count总是每1000ms执行一次,但它只在timer_is_on时执行任何操作,并且timer_is_on是否为true或false由toggle,它附加到我们的按钮上。我想稍微简单一点。

UPDATE

如果我们想要怎么办not有功能count总是在后台运行?正如 Tom Tu 指出的,这可能代表 CPU 开销。我不确定它是一个可测量的(或者它代表超出浏览器可能运行的用于执行其自己的 UI 更新的计时器的任何开销),但它在某些平台上可能很重要,因此可能值得解决。

当我们正在完善时,我不太喜欢自己通过标签属性附加事件处理程序,或者如果可以避免的话,将变量放入全局/窗口范围中,所以我可能会将所有相关的计数器设置/处理 JavaScript 包装在里面一大setupCounter功能,并附加toggle函数到onclick使用 DOM 选择和 JavaScript 的输入按钮事件。我可能会尝试只运行document.getElementById也每个查找一次。

所以,假设按钮输入有 idstartstop但否则假设类似的标记。我可能会做这样的事情:

function setupCounter() { 
    var c=0,
        interval,
        counter_display = document.getElementById('txt'),
        button = document.getElementById('startstop');

    function display_count() {
        counter_display.value = c;
    }

    function count() {
        c=c+1;
        display_count();
    }

    function toggle() {
       if(!interval)
          interval = setInterval(count,1000);
          button.value = "Stop count!";
       else {
          clearInterval(interval);
          interval = false;
          button.value = "Start count!";
       }
    }

    button.onclick = toggle;
}

然后你会打电话setupCounter在声明 counter_display 和 startstop 元素之后的某个时间,或者将其分配给window.onload事件或将其传递给类似 jQuery 的东西$(document).ready().

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 定时器 的相关文章

随机推荐

  • 如何使用两列上的 WHERE 子句加速 MySQL 查询?

    我试图通过两列上的 WHERE 子句来加速对大型表的查询 据我所知 MySQL 仅使用 ALERT ID 列 有没有办法使用两个索引重写此查询 SHOW INDEX 和 EXPLAIN 输出如下 show index from alert
  • nvarchar 连接/索引/nvarchar(max) 莫名其妙的行为

    今天我在 SQL Server 2008R2 和 2012 中遇到了一个非常奇怪的问题 我正在尝试使用串联和结合来构建一个字符串select陈述 我发现生成的字符串仅包含一个输入字符串 不是我所期望的所有输入字符串的串联结果 我已经找到了解
  • Fabric Crashlytics - 聚合来自不同项目的数据

    我有几个自定义的应用程序 它们具有不同的包名称 捆绑 ID 崩溃数据将被发送到 Fabric Crashlytics 仪表板中的不同应用程序 我猜它们有不同的包名称 即使崩溃数据相同 相同类型 相同异常 我的问题是 这可能吗 或者有没有办法
  • 调用退出后无法将握手入队

    我已经实现了以下代码 module exports getDataFromUserGps function callback connection connect connection query SELECT FROM usergps f
  • 自托管 WCF 服务器 - 从文件而不是证书存储加载证书

    我目前正在使用 wcf 服务器 并且希望从文件 资源 而不是证书存储加载我的证书 以使部署更容易 有什么想法如何做到这一点 感谢您的帮助 假设您使用双工通道 您可以从文件加载证书 如下所示 Load certificate file wit
  • 只获取数组的唯一值

    我是 javascript 的新手 我尝试使用不同的 但它不是我想要的 示例数组 let arr key 1 value dog key 1 value dog key 2 value cat key 3 value bird key 3
  • libgdx 剪切图像

    一段时间以来我一直在尝试 剪切 图像 我将解释为什么以及我尝试了什么 所以我想创建一个马力 条 只不过它不是条 而是一颗心 所以我认为这很容易 我所要做的就是让两张图片将它们画在彼此的顶部 然后只剪一张就可以了看起来好像 HP 正在丢失 但
  • 为什么我不能在 write-host 中使用 $_ ?

    我正在尝试将字符串数组通过管道传输到 write host 并显式使用 编写这些字符串 foo bar baz write host 但是 它失败了 输入对象无法绑定到命令的任何参数 因为该命令不采用管道输入 或者输入及其属性与采用管道输入
  • 如何向 FeathersJS 套接字连接添加参数

    我正在开发一个使用 FeathersJS 服务器的应用程序 以及一个使用 FeathersJS Socket io 客户端连接到服务器的 Electron 应用程序 我想使用 Electron 应用程序中的通道在服务器中的某些数据发生更改时
  • 将 python 中的数据框重塑为 3D

    我正在尝试将手写字符数据集重塑为 3D 形式 以便它可以与数字识别数据集连接起来 我尝试了多次 但我不知道如何做到这一点 实际的数字识别数据集的形状为 60000 28 28 字符识别数据集的形状为 372450 785 第一列是目标变量
  • 在 C++ 中从 YUV 转换为 RGB (android-ndk)

    我在 android 中开发 想要将相机的预览回调中的字节数组 YUV 格式 转换为 rgb 格式 我已经使用了这个答案中给出的函数 在Android中从视频图像获取帧 它在java中完美运行 但我的问题是我想在c 中创建该函数 我正在使用
  • mechanize (python) 单击 javascript 类型链接

    是否可以让 mechanize 跟随 javascript 类型的锚链接 我正在尝试使用 mechanize 和 beautifulsoup 登录 python 网站 这是锚链接 a href a
  • 如何在基于 Spring Java 的配置中放置带有正则表达式的 URL

    在 Spring Security XML 配置文件中 我有类似的内容
  • SQLite条件

    我只想将这个函数查询从navicat转换为sqlite查询 Select from tbl sample where ID 1 And IF RECEIPT MODE MANUAL DATE a MANUAL COLLECTION DATE
  • Karate API - 为什么响应不返回调用的功能文件

    我通过传递 un pwd 和端点 url 从后台标签下的另一个功能调用登录功能 如下所示 登录功能已成功运行 但其响应未返回到调用的功能文件 Add Feature Adding products Background table logi
  • java.util.date 错误?

    java util Date 是否有错误 在进行一些测试时 我将毫秒设置为 2147483647 应该给我一个日期 2038 01 19 03 14 07 但它返回的是 1970 01 25 20 31 23 还尝试了 4294967295
  • 不同环境下不同DB名的跨库查询?

    您将如何在不同环境中处理跨数据库查询 例如 db1 development 和 db2 development db1 product 和 db2 product 如果我想在开发过程中执行从 db2 到 db1 的跨数据库查询 我可以使用完
  • 使用 sqoop 导入 Hive 时出现文件存在错误

    我正在尝试将 Retail db 数据库表复制到我已经创建的 Hive 数据库中 当我执行以下代码时 sqoop import all tables num mappers 1 connect jdbc mysql quickstart c
  • 从连接表中过滤

    我在执行一个棘手的 SQL 查询时遇到了一些麻烦 在我的 MySQL 数据库中 有主题表 标签和标签主题来连接它们 我想获取共享相同指定标签的主题 例如 假设我有 3 个标签 id 分别为 1 2 和 3 我想获取与标签 1 2 和 3 关
  • JavaScript 定时器

    我正在尝试使以下 JavaScript 计时器只需单击一个按钮即可执行两个功能 一旦计时器启动 请单击 再次点击 它停止了 单击第三次 它会再次启动 依此类推 我在这里做错了什么 预先非常感谢您