防止 JavaScript 函数运行两次 (setTimeout)

2023-11-21

我有一个运行几秒钟的函数,使用setTimeout。单击按钮时将运行此函数。

function complete() {
    var div = document.getElementById('log');
    setTimeout(function(){ div.innerHTML = div.innerHTML + intro[Math.floor(Math.random() * intro.length)] + "<br>"; }, 500);
    setTimeout(function(){ div.innerHTML = div.innerHTML + second[Math.floor(Math.random() * second.length)] + "<br>"; }, 2560);
    setTimeout(function(){ div.innerHTML = div.innerHTML + third[Math.floor(Math.random() * third.length)] + "<br>"; }, 4860);
    setTimeout(function(){ div.innerHTML = div.innerHTML + fourth[Math.floor(Math.random() * fourth.length)] + "<br>"; }, 7860);
    setTimeout(function(){ div.innerHTML = div.innerHTML + fifth[Math.floor(Math.random() * fifth.length)] + "<br>"; }, 9640);
}

但是,如果用户多次单击该按钮,该函数也会开始执行多次。我试图通过使用下面的代码来防止这种情况发生,但是它不起作用。

var running;
function complete() {
    if (running == true) { alert('error'); }
    running = true;
    var div = document.getElementById('log');
    setTimeout(function(){ div.innerHTML = div.innerHTML + intro[Math.floor(Math.random() * intro.length)] + "<br>"; }, 500);
    setTimeout(function(){ div.innerHTML = div.innerHTML + second[Math.floor(Math.random() * second.length)] + "<br>"; }, 2560);
    setTimeout(function(){ div.innerHTML = div.innerHTML + third[Math.floor(Math.random() * third.length)] + "<br>"; }, 4860);
    setTimeout(function(){ div.innerHTML = div.innerHTML + fourth[Math.floor(Math.random() * fourth.length)] + "<br>"; }, 7860);
    setTimeout(function(){ div.innerHTML = div.innerHTML + fifth[Math.floor(Math.random() * fifth.length)] + "<br>"; }, 9640);
    running = false;
}

我应该采取什么方法,或者如何修复我的代码,以便它可以完成我想要做的事情?


Your running = false;应该在超时函数内,因为超时将异步执行,running = false;将在超时结束之前执行

一个简单的例子是

var running = false,
    div = document.getElementById('response'),
    limit = 5,
    current = 0;

$('#trigger').click(function () {
    if (running === true) {
        alert('Error: The cycle was running. Aborting.');
        running = false;
        return false;
    }
    running = true;
    var end = setInterval(function () {
        if (current >= limit || running == false) {
            running = false;
            clearInterval(end);
        }
        div.innerHTML += 'Hello World<br />';
        current++;
    }, 500);

});

JSFiddle 示例

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

防止 JavaScript 函数运行两次 (setTimeout) 的相关文章

  • libxmljs 的替代品 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 目标 使用 Node js 访问网页 使用 xpath 语法操作 DOM 并打印新的 DOM libxm
  • 按键对 JavaScript 对象进行排序

    我需要按键对 JavaScript 对象进行排序 因此 以下内容 b asdsad c masdas a dsfdsfsdf 会成为 a dsfdsfsdf b asdsad c masdas 这个问题的其他答案已经过时 与实施现实不符 并
  • JavaScript - 无需布尔值即可运行一次

    有没有办法只运行一段JavaScript代码ONCE 而不使用布尔标志变量来记住它是否已经运行过 具体来说not就像是 var alreadyRan false function runOnce if alreadyRan return a
  • 雅虎 OAuth2 隐式授予流程不适用于新的雅虎应用程序

    我有现有的网络应用程序和专用雅虎应用程序 https developer yahoo com apps 在职的 它用OAuth2 隐式授权流程 https developer yahoo com oauth2 guide flows imp
  • 我应该在构造函数中调用成员函数吗

    我知道这是一个相当简单的问题 并且还取决于代码的其余部分 但我对经验法则更感兴趣 那么什么情况下适合在构造函数中调用函数呢 更可取的是 ClassA obj1 obj1 memFun or ClassA obj1 where constru
  • Cosmos DB Mongo API 如何管理“请求率很大”情况

    我有以下代码 async function bulkInsert db collectionName documents try const cosmosResults await db collection collectionName
  • 游戏手柄 JavaScript 未能按预期更新

    我正在尝试让浏览器报告我的 XBOX 控制器的状态 然而 在第一次按下按钮后 它似乎变得 卡住 我究竟做错了什么
  • JavaScript:常量属性

    在javascript中 我可以将对象的属性声明为常量吗 这是一个示例对象 var XU Cc Components classes or function aXU this Cc Components classes var XU new
  • ReactCSSTransitionGroup 组件WillLeave 未调用

    我尝试使用 ReactCssTransition 但不知何故该事件没有被调用 componentWillLeave 这是我的组件 import React Component from react import TransitionGrou
  • 带有 mkdocs 的本地 mathjax

    我想在无法访问互联网的计算机上使用 MathJax 和 Mkdocs 因此我不能只调用 Mathjax CDN Config mkdocs yml site name My Docs extra javascript javascripts
  • 如何在 javascript 中基于类型字符串创建新对象?

    如何基于变量类型字符串 包含对象名称 在 javascript 中创建新对象 现在我有 随着更多工具的出现 列表会变得更长 function getTool name switch name case SelectTool return n
  • 如何知道浏览器空闲时间?

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl
  • put方法中的Angularjs文件上传不起作用

    我有一个简单的待办事项应用程序 我试图在其中上传照片和单个待办事项 现在我已经创建了这个工厂函数来负责待办事项的创建 todosFactory insertTodo function todo return http post baseUr
  • 尝试使用 Firebug 查找 JavaScript 文件中的函数

    我试图找到这个函数调用 myFooBar 该函数在某些 HTML 中内联引用 但页面加载了大量 JavaScript 并且在每个文件中搜索该函数需要相当多的工作 如何使用 Firebug 找到此函数所在的 JavaScript 文件 打开脚
  • jQuery 悬停时滚动到 div 并返回到第一个元素

    我基本上有一个具有设定尺寸的 div 和overflow hidden 该 div 包含 7 个子 div 但一次只显示一个 我希望当它们各自的链接悬停时能够平滑地垂直滚动 但是 第一部分 div 没有链接 并且是没有悬停链接时的默认部分
  • JavaScript Promise 不执行 .then()

    我在 JavaScript 中的 Promise 方面遇到了一些问题 我想做的是获得一个地址列表 然后对于每个地址 我需要调用地理编码 API 来获取 lat lng 然后我将继续将标记与热图一起绘制 这是我的代码 let promiseK
  • 根据特定字符获取整个字符串或子字符串

    我有一个包含 MIME 类型的字符串 例如application json 现在我想将其与实际的 HTTP 标头进行比较 在本例中content type 如果标头包含 MIME 类型 那么就很简单 if mimeType contentT
  • 是否可以将请求标头添加到 CORS 预检请求中?

    我有一个从外部服务器 不是服务器 访问 API 的网站 为网站提供服务 通过简单的XmlHttpRequest 见下文 那个API 需要将用于访问服务的 API 密钥添加为请求标头 然而 正如这些CORS https developer m
  • Outlook 加载项,无法读取未定义的属性“BeginRequestEventArgs”

    我使用 Visual Studio 开发了 Outlook 插件 我的插件有一个按钮 用于填充会议邀请正文中的详细信息并添加所需的与会者 这在 99 的情况下都有效 但是 时不时地它会给我下面的 JavaScript 错误 Uncaught
  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur

随机推荐

  • 什么时候放弃 MVVM 才有意义?

    当我学习 WPF 时 我一直专注于仅应用MVVM模式到应用程序 但是 我注意到对于某些功能比如验证 很难或不可能保持 MVVM 模型的真实性 很多时候只是简单地粘贴x Name在一个元素上并改变它代码隐藏事件处理程序立即解决问题 你有什么现
  • 我该如何用扫描仪(java)处理它?

    我有一个关于扫描仪的问题 我在一家小公司工作 我们有一个软件 它生成一个大文本文件 我们必须从中得到一些有用的信息 我想用java编写一个简单的应用程序以节省时间 你能指导一下吗 例如我想要这个输出 Output 射频识别 25 蓝色 56
  • Angular JS (angular-ui-tree) ng-click 冲突与拖动开始事件

    我目前正在使用角度 ui 树图书馆和我试图实现以下行为 当用户单击 可拖动节点 时 它会触发 ng click 功能 如果用户单击并开始拖动 ng click 会被忽略 并开始常规的拖放操作 我有以下 html 结构 div div div
  • 为什么 #!/usr/bin/env ruby​​ 在 crontab 中不起作用?

    我已经通过 rvm 系统范围 安装了 ruby 并通过普通控制台正常工作 并且我的 Rails 程序在两者上都运行正常rails runner and apache2 passenger 现在在 crontab 中 我调用了rails ru
  • 由于 LogCollectManager.getUserType() 错误,无法启动 Android 应用程序

    当我尝试在华为 P9 上运行我的应用程序时 出现错误 尝试调用虚拟方法 int com huawei lcagent client LogCollectManager getUserType 为空 对象引用 有没有办法调试这个 因为应用程序
  • javascript 纬度经度到地球上的 xyz 位置 (thirdjs)

    我正在玩 Three js 我想在更大的球体上的特定坐标上渲染对象 我非常接近解决方案 但我没有从 lat lon 获得正确的 xyz 位置 我在jsfiddle上设置了一个测试用例 有两个坐标 latlons 40 7142700 74
  • 如何根据 Git 分支的名称为其着色?

    我的本地 git 存储库中有许多分支 并且我保留了特定的命名约定 这有助于我区分最近使用的分支和旧分支 或者区分与 master 合并的分支和未合并的分支 有没有办法在输出中为分支名称着色git branch根据一些基于正则表达式的规则而不
  • 如何调试 .BAT 脚本?

    有没有办法单步执行 bat 脚本 问题是 我有一个构建脚本 它调用很多其他脚本 我想看看它们的调用顺序是什么 这样我就可以知道我到底应该去哪里并添加我的修改 我不知道如何逐步执行 bat 文件 但您可以使用echo and pause帮助调
  • 定义在 Swift 中被视为类的结构

    在斯威夫特String结构也被视为类对象 就像使用NSCoder encodeObject forKey 方法 我确实知道String直接与 Objective C 类桥接 NSString 但是有没有办法定制struct其行为类似 也许将
  • REST 应用程序的 RequestBody

    我对 SpringMVC REST 概念有点陌生 需要专家的帮助来理解 解决以下问题 我开发了一个 SpringMVC 应用程序 以下是控制器类代码的一部分 它按原样工作得很好 这意味着它可以与 JSON 类型对象一起工作 RequestM
  • docker-compose 上的 WordPress 无法运行

    这是我的 docker compose yml version 2 services wordpress image wordpress ports 8080 80 environment WORDPRESS DB PASSWORD exa
  • Python Scrapy - 从 mysql 填充 start_urls

    我正在尝试使用 MYSQL 表中的 SELECT 来填充 start url蜘蛛 py 当我运行 scrapy runningpider Spider py 时 我没有得到任何输出 只是它完成时没有错误 我已经在 python 脚本中测试了
  • 使用 CoreData 在 iPhone 上导入大型数据集

    我面临着非常烦人的问题 我的 iPhone 应用程序正在从网络服务器加载数据 数据以 plist 形式发送 解析时需要使用 Core Data 将其存储到 SQLite 数据库 问题是 在某些情况下 这些数据集太大 5000 多条记录 导入
  • java.net.UnknownHostException:无法解析主机“”:没有与主机名关联的地址,且输入结束位于字符 0 处

    我创建了一个从我的网络服务加载问题的应用程序 并且运行良好 但是 有时它会崩溃 我不明白为什么会发生这种情况 特别是因为我也给了它所需的权限 它工作正常 但随机崩溃并给我这个报告 private void sendContinentQues
  • 多个 goroutine 监听一个通道

    我有多个 goroutine 尝试同时在同一通道上接收数据 看起来最后一个在通道上开始接收的 Goroutine 获得了该值 这是语言规范中的某个地方还是未定义的行为 c make chan string for i 0 i lt 5 i
  • android 中奇怪的 webview goBack 问题

    我在 Android 中使用 webview 但奇怪的是 有时甚至是webviewcanGoBack方法返回true 网页视图goBack方法不起作用 if webView canGoBack webView goBack 谢谢你的任何想法
  • Oracle 写入文件

    我正在运行 Oracle 并有一个查询从数据库中提取一些结果 我想将结果写入文本文件 我该怎么做呢 我首选的方法是使用 UTL FILE 有人可以举例说明如何做到这一点吗 如果您使用 Sql Plus 则非常简单 SQL gt spool
  • iOS 中如何获取触摸尺寸?

    我明白那个这个回应明确指出 如果没有私有函数调用 这是不可能的 因此 根据苹果的条款 这种方式不能在App Store应用程序上使用 然而 一些应用程序似乎已经使用了这个函数调用 倒数第二个用于实际防手掌误触 无需像 Note Taker
  • GL 表面和能见度:消失

    因此 我的应用程序中有一个 GLSurfaceView 由 GLSurfaceView Renderer 渲染并使用 JPCt 作为库 表面位于不可见的RelativeLayout 中 可见性 消失 当我将可见性更改为 可见 然后返回 消失
  • 防止 JavaScript 函数运行两次 (setTimeout)

    我有一个运行几秒钟的函数 使用setTimeout 单击按钮时将运行此函数 function complete var div document getElementById log setTimeout function div inne