Javascript在一段时间后执行功能
[英]Javascript execute a function after some time elapse
问题描述
I am making a javascript based life game, and I am currently working on a salary system so, for example, every 10 seconds the balance goes up by 1. I've been looking for a while how to do it but never found anything. 
我正在制作一个基于JavaScript的生活游戏，并且我目前正在开发一种薪资系统，因此，例如，每10秒钟余额就会增加1。我一直在寻找方法，但是却一无所获。 Here are my codes: 这是我的代码：
var balance = 100; function balanceSys(){ let newbalance = balance + 100; balance = newbalance; document.getElementById("balance").innerHTML = (balance); } function salary(){ }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Life Game</title> <link rel="stylesheet" href="main.css"> <link href="https://fonts.googleapis.com/css?family=Mukta+Malar" rel="stylesheet"> </head> <script src="main.js"></script> <body> <center><h1 class="title">Life Game</h1></center> <table> <tr> <td class="mainTd"><h1 id="balance">0</h1></td> <td class="mainTd"><h1 id="state">Begger</h1></td> </tr> </table> <button onclick="balanceSys()">Click Me</button> </body> </html>
2 个解决方案
解决方案1
0 已采纳 2018-09-15 19:27:13
Use setInterval() . 使用setInterval() 。 It will execute a function every X milliseconds (The second parameter). 它将每X毫秒执行一次函数（第二个参数）。
You can also take in a parameter for amt to adjust by, and add varying amounts (In this case, I specified 1 in the original interval function, and 100 by default if not specified. 您还可以输入amt的参数进行调整，并添加不同的数量（在这种情况下，我在原始间隔函数中指定了1，如果未指定，则默认为100。
var balance = 0; setInterval(() => balanceSys(1), 1000); function balanceSys(amt = 100){ let newbalance = balance + amt; balance = newbalance; document.getElementById("balance").innerHTML = (balance); } function salary(){ }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Life Game</title> <link rel="stylesheet" href="main.css"> <link href="https://fonts.googleapis.com/css?family=Mukta+Malar" rel="stylesheet"> </head> <script src="main.js"></script> <body> <center><h1 class="title">Life Game</h1></center> <table> <tr> <td class="mainTd"><h1 id="balance">0</h1></td> <td class="mainTd"><h1 id="state">Begger</h1></td> </tr> </table> <button onclick="balanceSys()">Click Me</button> </body> </html>
解决方案2
0 2018-09-15 19:36:09
I agree with FrankerZ's method, but you don't want to run getElementById every second. 我同意FrankerZ的方法，但是您不想每秒运行一次getElementById 。 Here is a better solution. 这是一个更好的解决方案。 DOM manipulation is very slow, so try to minimize the impact in performance as much as possible. DOM操作非常缓慢，因此请尝试尽可能降低对性能的影响。
function balanceSys(){ let element = document.getElementById("balance"); setInterval(() => { let newbalance = balance + 1; balance = newbalance; element.innerHTML = (balance); }, 10000); }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.