我有一个javascript数组：
["joe", "james", "jane", "jim", "jack", "ADAM", "jill", "jake", "John", "joel", "jeff", "CHARLES"]
这个想法是显示所有小写名称 500ms 秒，然后替换为下一个小写名称(也为 500ms(。当我到达大写名称时，我希望它保持 5000 毫秒。理想情况下，有一个 5 个小写和 1 个大写的模式。
我实际上并不了解Javascript，但这里有一些c#，你应该能够通过查看它来转换它
我假设"约翰">应该是"约翰">
for (int i = 0; i < NameArray.Length; i++)
{
if (NameArray[i] == NameArray[i].ToLower()) //Javascript equivalent would be .toLowerCase()
{
Console.WriteLine(NameArray[i]);
System.Threading.Thread.Sleep(500); //Javascript equivalent would be wait(500)
}
else if (NameArray[i] == NameArray[i].ToUpper()) //Javascript equivalent would be .toUpperCase()
{
Console.WriteLine(NameArray[i]);
System.Threading.Thread.Sleep(5000); //Javascript equivalent would be wait(5000)
}
}
如果必须：
//<![CDATA[
var pre = onload, doc, bod, E, weirdWait; // for use on other loads
onload = function(){
if(pre)pre(); // use different var name to hold more loads on other pages
doc = document; bod = doc.body;
E = function(id){
return doc.getElementById(id); // hope you learned something here
}
weirdWait = function(displayDiv, yourArray, timerDiv){
var i = 0;
displayDiv.innerHTML = yourArray[i];
if(timerDiv)timerDiv.innerHTML = new Date().toString();
function recurse(){
var si = setInterval(function(){
i++;
if(!yourArray.hasOwnProperty(i))i = 0;
var val = yourArray[i];
displayDiv.innerHTML = val;
if(timerDiv)timerDiv.innerHTML = new Date().toString();
if(val.match(/^[A-Z]/)){
clearInterval(si); setTimeout(recurse, 4500);
}
}, 500);
}
recurse();
}
var yourArray = ['joe', 'james', 'jane', 'jim', 'jack', 'ADAM', 'jill', 'jake', 'John', 'joel', 'jeff', 'CHARLES'];
weirdWait(E('output'), yourArray, E('timer'));
}
//]]>html,body{
padding:0; margin:0;
}
.main{
width:940px; background:#000; color:#fff; padding:20px; margin:0 auto;
}
#output{
font:bold 64px Arial, Helvetica, sans-serif;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width' />
<title>weird wait</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<div id='output'></div>
<div id='timer'></div>
</div>
</body>
</html>试试这个：
const array = ["joe", "james", "jane", "jim", "jack", "ADAM", "jill", "jake", "JOHN", "joel", "jeff", "CHARLES"];
function recursiveStaggeredLoop (arr, i) {
while (i < array.length) {
if (array[i] === array[i].toLowerCase()) {
console.log(array[i]);
i++
return setTimeout(() => {
return recursiveStaggeredLoop(array, i);
}, 500)
}
else if (array[i] === array[i].toUpperCase()) {
console.log(array[i])
i++
return setTimeout(() => {
return recursiveStaggeredLoop(array, i)
}, 5000)
}
}
console.log('all done')
}
recursiveStaggeredLoop(array, 0)我只是在这里使用一个简单的while循环和递归，完成工作。
一个快速说明，它仅适用于严格的小写或大写名称。您的原始数组有一个"John"，它会破坏此代码。但这应该足以让你开始。
const names = ["joe", "james", "jane", "jim", "jack", "ADAM", "jill", "jake", "John", "joel", "jeff", "CHARLES"];
const displayName = (index, max) => {
if (max === index) {
return;
}
// set your html to the name
const timeout = names[index] === names[index].toUpperCase() ? 5000 : 500;
setTimeout(displayName(index + 1, max), timeout);
}
displayName(0, names.length);
我把弄清楚如何显示它留给你，有很多方法可以做到这一点，例如设置div 的 innerHtml。