如何设置功能延迟？
[英]How to set a delay to a function?
问题描述
我知道这个问题可以通过多种方式回答，但我需要有人为我完成。 我希望动画完成任务，然后弹出一个随机数？ 现在，我一键即可实现2个功能（我需要）。 我是新来的，一个简单的公式就很棒！ 任何人都可以帮忙，如果可以的话，我们将不胜感激！ 谢谢！ 这就是全部代码！
startbtn = function() { $('.wheel').addClass('animated-wheel'); setTimeout(setRandom('random') {}, 6000); } function getRandom() { var values = [1, 15, 30, 45]; return values[Math.floor(Math.random() * values.length)]; } function setRandom(id) { document.getElementById(id).innerHTML = getRandom(); } function refresh() { location.reload(); };
.number { text-align: center; color: white; font-size: 78px; } .wheel { width: 200px; height: 100px; left: 600px; top: 300px; background: green; position: relative; } .animated-wheel { -webkit-animation: myfirst4s 2; -webkit-animation-direction: alternate; animation: myfirst 4s 2; animation-direction: alternate; } @-webkit-keyframes myfirst { 0% { background: green; left: 600px; top: 300px; } 33% { background: black; left: 600px; top: 0px; } 66% { background: red; left: 600px; top: 650px; } 100% { background: black; left: 600px; top: 0px; } } @keyframes myfirst { 0% { background: green; left: 600px; top: 300px; } 33% { background: green; left: 600px; top: 300px; } 66% { background: black; left: 600px; top: 0px; } 100% { background: red; left: 600px; top: 650px; } }
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!DOCTYPE html> <html> <head></head> <title>The Wheel!</title> <body bgcolor="orange"> <head> </head> <div class="wheel"> <h1 class="number" id="random"></h1> </div> <button onclick="startbtn();setRandom('random');">Start</button> <button onclick="refresh()">Reset</button> </body> </html>
2 个解决方案
解决方案1
3 2019-03-16 20:14:47
有很多更优雅的方法，但是这里是您的错误的更正：
setTimeout(function(){
setRandom('random')
}, 6000);
解决方案2
3 已采纳 2019-03-16 20:14:50
您在setTimeout()遇到语法错误：
startbtn = function() { $('.wheel').addClass('animated-wheel'); setTimeout(function() { // Remove animation class setRandom('random'); $('.wheel').removeClass('animated-wheel'); }, 6750); } function getRandom() { var values = [1, 15, 30, 45]; return values[Math.floor(Math.random() * values.length)]; } function setRandom(id) { document.getElementById(id).innerText = getRandom(); } function refresh() { location.reload(); };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head></head> <title>The Wheel!</title> <body bgcolor="orange"> <head> <style> .number { text-align: center; color: white; font-size: 78px; } .wheel { width: 200px; height: 100px; left: 600px; top: 300px; background: green; position: relative; } .animated-wheel { -webkit-animation: myfirst4s 2; -webkit-animation-direction: alternate; animation: myfirst 4s 2; animation-direction: alternate; } @-webkit-keyframes myfirst { 0% { background: green; left: 600px; top: 300px; } 33% { background: black; left: 600px; top: 0px; } 66% { background: red; left: 600px; top: 650px; } 100% { background: black; left: 600px; top: 0px; } } @keyframes myfirst { 0% { background: green; left: 600px; top: 300px; } 33% { background: green; left: 600px; top: 300px; } 66% { background: black; left: 600px; top: 0px; } 100% { background: red; left: 600px; top: 650px; } } </style> </head> <div class="wheel"> <h1 class="number" id="random"></h1> </div> <button onclick="startbtn();">Start</button> <button onclick="refresh()">Reset</button> </body> </html>
希望这可以帮助，
调用 function 后如何设置延时？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.