Textarea在设置值后消失

通过单击“输入名称”键入首字母缩写（例如MS，AK，LT）。这保存了一个字符串，然后我将它变成一个数组（nameArray）以获得每组缩写。在将这些随机重新排序后，我想将一些首字母缩写放到textareas中，但这是出错的地方。

这里的什么是错的：

缩写显示了一会儿，然后消失，函数执行后。（另外，我试图让一个div（带有文本“randomizing ...”），否则它会被隐藏起来，显示4秒（4000毫秒），而首字母被重新排序以表示出来，这就是setTimeout是为...但这也行不通，div随着文字一起消失）。为什么这些只与功能的执行协调一致？

这里的JS代码：

var nameArray; 

window.onload = pageLoad; 

function pageLoad() { 
    $("#randomizingNotification").hide(); 
    $("#prev_arrow").click(prevUser); 
    $("#next_arrow").click(nextUser); 
    $("#enter_names").click(orderNames);  
} 

function orderNames() { 
    nameArray = getNames(); 
    randomizeNames(); 
    displayNames(); 
} 

function getNames() { 
    var initialsString = prompt("Please enter initials, separated by a comma (e.g LK,AS,NM)"); 
    nameArray = initialsString.split(","); 
    return nameArray; 
} 

function randomizeNames() { 
    $("#randomizingNotification").show(); 
    var timer = setTimeout(function(){randomize(nameArray);},4000); 
    $("#randomizingNotification").hide(); 
    clearTimeout(timer); 
} 

function randomize(array) { 
    for (var i = 0; i < array.length; i++) { 
     var randNum = Math.floor(array.length*Math.random()) //random number between 0 and length of array (rounded down 
     var temp = array[i]; 
     array[i] = array[randNum]; 
     array[randNum] = temp; 
    } 
} 

function displayNames() { 
    var curr, up, prev, current, upcoming, previous; 
    curr = 0; 
    up = 1; 
    prev = null 

    current = nameArray[curr]; 
    upcoming = nameArray[up]; 

    $("#upcoming_pick").val(upcoming); 
    $("#current_pick").val(current); 
}

下面是相关的HTML代码：

<body> 
<div id="header"> 
    <div id="randomizeNotContDiv"> 
     <div id="randomizingNotification">randomizing...</div> 
    </div> 

    <div id="page_title"><h1>Welcome to Classtech Shift Scheduler!</h1></div> 

    <div id="helper_functions_div"> 
     <div id="enter_names_div"> 
      <a href="" id="enter_names">Enter Names</a> 
     </div> 
    </div>

<div id="main_content"> 
    <div id="name_tracker"> 

     <div><a href="" alt="prev" id="prev_arrow"><img src="Images/prev_arrow.png"/></a></div> 

     <textarea name="upcoming_pick" cols="10" rows="1" class="picker_names" id="upcoming_pick"></textarea> 
     <textarea name="current_pick" cols="10" rows="1" class="picker_names" id="current_pick"></textarea> 
     <textarea name="previous_pick" cols="10" rows="1" class="picker_names" id="previous_pick"></textarea> 

     <div><a href="" alt="next" id="next_arrow"><img src="Images/next_arrow.png"/></a></div> 

    </div>

来源

2013-04-01 Alex Silverman

创建jsfiddle.net – mplungjan

我所看到的“文本区域”规定 - 如果它有差别不能确定。即$（“textarea＃coming_pick”）.val（即将到来）; –

@ d'alar'cop不，谢谢你。 –

你得至少一些问题，但主要问题是setTimeout的结构。 setTimeout就像一个AJAX调用，因为它是非阻塞的。传递给它的函数中的任何内容只会在计时器完成时执行，而后面的代码将立即执行。

我已经重组隐藏你的随机化消息和displayNames函数去setTimeout函数和事情工作正常。

这是一个小提琴：http://jsfiddle.net/nate/LB6dz/

而这里的代码：

var nameArray; 

window.onload = pageLoad; 

function pageLoad() { 
    $("#randomizingNotification").hide(); 
    $("#enter_names").click(orderNames);  
} 

function orderNames(event) { 
    // Prevent the link's default action 
    event.preventDefault(); 

    nameArray = getNames(); 
    randomizeNames(); 
} 

function getNames() { 
    var initialsString = prompt("Please enter initials, separated by a comma (e.g LK,AS,NM)"); 
    nameArray = initialsString.split(","); 
    return nameArray; 
} 

function randomizeNames() { 
    $("#randomizingNotification").show(); 
    var timer = setTimeout(function(){ 
     randomize(nameArray); 
     // These items need to be inside the timeout, so they only run once it's done 
     $("#randomizingNotification").hide(); 
     displayNames(); 
    }, 4000); 
    // No need to clearTimeouts after they're done... they only run once 
    // clearTimeout(timer); 
} 

function randomize(array) { 
    for (var i = 0; i < array.length; i++) { 
     var randNum = Math.floor(array.length*Math.random()) //random number between 0 and length of array (rounded down 
     var temp = array[i]; 
     array[i] = array[randNum]; 
     array[randNum] = temp; 
    } 
} 

function displayNames() { 
    var curr, up, prev, current, upcoming, previous; 
    curr = 0; 
    up = 1; 
    prev = null 

    current = nameArray[curr]; 
    upcoming = nameArray[up]; 

    $("#upcoming_pick").val(upcoming); 
    $("#current_pick").val(current); 
}

来源

2013-04-01 16:50:06 Nate

这工作更像我想，除了这次，初始显示在randomizeNotification消失之前。有没有办法协调它，以免发生？也许设置另一个超时功能？ –

我还没有检查过Chrome以外的任何浏览器，但这不是我的例子中发生的事情。你正在检查我的小提琴，还是你只是更新自己的代码？ displayNames函数在定时器耗尽之前不会被调用。绝对不需要设置另一个setTimeout。重要的是要正确理解现有setTimeout中的执行顺序。 – Nate

它的工作原理！再次感谢Nate。如果可以的话，我会加倍努力。 –

Textarea在设置值后消失

回答

相关问题