可以在javascript上同时运行2个函数吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (15)

嘿,我正在开发一款小游戏,计算你在30秒内点击图像的次数。我有2个独立的功能,一个功能为图像生成一个新位置并更新玩家得分,另一个从30秒倒计时并更新“Clicked”段落。

问题是我在做一些研究的同时似乎无法运行2个函数,我看到js只能运行一个线程,所以这怎么可能呢?

<html>
<head>
</head>
<body>
    <img id='ball' src="ball.png" alt="Logo"style="position: absolute; top: 450px; left: 900; width:70px;height:70px;" onclick="moveBall()">
    <p id="demo"></p>
    <p id="timer"></p>
    <p id="Clicks" style="font-family: Impact, Charcoal, sans-serif; font-size:150px; color:brown;">0</p>
    <script>
        function moveBall()
        {
            var ball = document.getElementById("ball");
            ball.style.left = Math.floor(Math.random() * 1500);
            ball.style.top = Math.floor(Math.random() * 900)
            document.getElementById('Clicks').innerHTML = parseInt(document.getElementById('Clicks').innerHTML) + 1;
            if(document.getElementById('Clicks').innerHTML == 20)
            {
                document.body.style.backgroundColor = "#68a2ff";
                document.getElementById('Clicks').style.color = '#ff688d';
            }
        }
        function sleep() 
        {
            var start = new Date().getTime();
            var finish = start + 20;
            while(finish - start != 0)
            {
                document.getElementById('timer').innerHTML = finish - start;
            }

        } 
    </script>
</body>
</html>
提问于
用户回答回答于

像其他人说的那样,试试setTimeout。我测试了30秒,它的工作原理。它仅在30秒标记期间更新分数。

编辑:尝试缩短计时器,这样您就不必等待30秒。即3000而不是30000.我没有实现显示计时器。

编辑:我添加了计时器。它不完美但足够接近。我把它改为setInterval,时间改为10秒。

<html>

<head>
</head>

<body>
  <img id='ball' src="ball.png" alt="Logo" style="position: absolute; top: 450px; left: 900; width:70px;height:70px;" onclick="moveBall()">
  <p id="demo"></p>
  <p id="timer"></p>
  <p id="Clicks" style="font-family: Impact, Charcoal, sans-serif; font-size:150px; color:brown;">0</p>
  <script>
    let isTimesUp = false;
    let isTimerStart = false;
    let timer = 10;
    let score = 0;

    setInterval(() => {
      if (timer >= 0) {
        document.getElementById('timer').innerHTML = timer--;
      } else {
        isTimesUp = true;
      }
    }, 1000);

    function moveBall() {
      var ball = document.getElementById("ball");
      ball.style.left = Math.floor(Math.random() * 1500);
      ball.style.top = Math.floor(Math.random() * 900);
      isTimerStart = true;
      if (!isTimesUp) {
        score++;
        document.getElementById('Clicks').innerHTML = score;
      }

      if (document.getElementById('Clicks').innerHTML == 20) {
        document.body.style.backgroundColor = "#68a2ff";
        document.getElementById('Clicks').style.color = '#ff688d';
      }
    }
  </script>
</body>

</html>

热门问答

在serverless中,我能否自己host 一个express(nodejs)的服务?

Tina

腾讯云 · 产品经理 (已认证)

Go Serverless!
推荐
您好,可以这样的。您可以参考如下文档,申请下http function 您可以使用常见的 WEB 框架(如 Nodejs Web 框架:Express、Koa)编写 HTTP 函数。而 WEB 框架内置的一些中间件(如cors)也会极大的方便您的业务编写 文档链接 https:...... 展开详请

使用有过期时间的签名往Cos存储桶中上传文件,若上传还在进行中签名过期,上传是否会终止?

galenye

腾讯 · 工程师 (已认证)

对象存储专业搬砖工
推荐已采纳

如果你是使用的简单上传,它能接收5g以内的文件,那签名过期的文件还在上传的话,是没影响的,因为签名判断是在cos接受到请求时。

如果你是使用的sdk等封装的分片上传,那其实是多个请求去上传文件,如果签名过期了,那上传到某一刻,后面的请求都会返回403

存储桶的默认加速域名 cdn 如何更改业务类型, 即把静态加速改成下载加速?

Jinqn

腾讯 · 高级工程师 (已认证)

腾讯云COS前端开发
推荐

我理解你意思是,浏览器打开的时候要下载,不要直接显示。

通过存储桶的文件 Content-Type 来控制

为何我使用.Net API 生成的临时密钥无法进行文件操作?

推荐
cos有自己的密钥系统,应该是在控制台上,访问管理,API密钥,项目密钥那里,或者去看看cos的文档是如何说明的吧。 你通过ms接口创建cos临时密钥,也许的确会被限制一些,这个需要ms这个产品的人回答下比较好。 生成临时密钥和哪个SDK无关,可以直接在线调用也可以生成,通过AP...... 展开详请

tencentcloud-sdk-php-master github代码上没有vendor文件夹?

推荐
因为和composer冲突,因此导出时没有包含vendor目录。如果需要,可以考虑git clone方式拿到,或者到https://cloud.tencent.com/document/sdk/PHP#.E9.80.9A.E8.BF.87.E6.BA.90.E7.A0.81.E5...... 展开详请

织云安装包在哪里下载?

使用织云,必须要满足1、2步骤1、机器要同步到c.isd.com系统。简单讲,就是在c.isd.com上有这台机器(如果c.isd.com没有,而公司的cmdb【cmdb.oa.com】有,则需要同步到c.isd.com即可,同步需要联系zhiyunhelper同步,而没有的话,...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券