Fatal编程技术网
  • javascript/
  • Javascript 文本区域在设置值后消失

Javascript 文本区域在设置值后消失

javascript jquery

Javascript 文本区域在设置值后消失,javascript,jquery,textarea,settimeout,Javascript,Jquery,Textarea,Settimeout,以下是我想做的： 通过单击“输入姓名”键入首字母缩写（如MS、AK、LT）。这将保存一个字符串，然后将其转换为一个数组（nameArray），以获得每组首字母。在随机地重新排序之后，我想把一些首字母放在文本区域中，但这就是问题所在 问题是： 初始值显示片刻，然后在函数执行后消失。（另外，我正试图让一个div（带有文本“随机化…”）以其他方式隐藏，在对首字母进行重新排序时显示4秒（4000毫秒）。这就是setTimeout的目的…但也不起作用。div随文本一起消失）。为什么这些仅与功能的执行相协调

以下是我想做的：

通过单击“输入姓名”键入首字母缩写（如MS、AK、LT）。这将保存一个字符串，然后将其转换为一个数组（nameArray），以获得每组首字母。在随机地重新排序之后，我想把一些首字母放在文本区域中，但这就是问题所在

问题是：

初始值显示片刻，然后在函数执行后消失。（另外，我正试图让一个div（带有文本“随机化…”）以其他方式隐藏，在对首字母进行重新排序时显示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);
}

var-nameArray；
window.onload=页面加载；
函数pageLoad（）{
$（“#随机化通知”）.hide（）；
$（“#上一个箭头”）。单击（上一个用户）；
$（“#下一个箭头”）。单击（下一步）；
$（“#输入#名称”）。单击（订单名称）；
}
函数orderNames（）{
nameArray=getNames（）；
randomizeNames（）；
显示名称（）；
}
函数getNames（）{
var initialsString=prompt（“请输入缩写，用逗号分隔（例如LK、AS、NM）”）；
nameArray=initialsString.split（“，”）；
返回名称数组；
}
函数randomizeNames（）{
$（“#随机化通知”）.show（）；
var timer=setTimeout（函数（）{randomize（nameArray）；}，4000）；
$（“#随机化通知”）.hide（）；
清除超时（计时器）；
}
函数随机化（数组）{
对于（var i=0；i
以下是相关的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>


随机化。。。
欢迎来到Classtech排班程序！

您至少遇到了一些问题，但主要问题是setTimeout的结构。setTimeout类似于AJAX调用，因为它是非阻塞的。传递给它的函数中的任何内容都只会在计时器完成时执行，而在它之后出现的代码会立即执行

我已经重新组织了随机化消息和displayNames函数的隐藏，使其进入setTimeout函数，一切正常

这是一把小提琴：

下面是代码：

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);
}

var-nameArray；
window.onload=页面加载；
函数pageLoad（）{
$（“#随机化通知”）.hide（）；
$（“#输入#名称”）。单击（订单名称）；
}
函数orderNames（事件）{
//阻止链接的默认操作
event.preventDefault（）；
nameArray=getNames（）；
randomizeNames（）；
}
函数getNames（）{
var initialsString=prompt（“请输入缩写，用逗号分隔（例如LK、AS、NM）”）；
nameArray=initialsString.split（“，”）；
返回名称数组；
}
函数randomizeNames（）{
$（“#随机化通知”）.show（）；
var timer=setTimeout（函数（）{
随机化（名称数组）；
//这些项目需要在超时时间内，因此它们只在超时完成后运行
$（“#随机化通知”）.hide（）；
显示名称（）；
}, 4000);
//完成后不需要清除超时…它们只运行一次
//清除超时（计时器）；
}
函数随机化（数组）{
对于（var i=0；i
创建一个jsfiddle.netI已经看到指定的“textarea”-不确定它是否有区别。例如$（“textarea#coming#u pick”）.val（coming）@d'alar'cop不，谢谢。你的
randomizeNames
函数确实彻底搞错了一切。你是什么意思？randomizeNames函数工作，只是重新排列数组中的元素。这更像我所希望的，只是这次，在randomizentification消失之前显示初始值。有什么方法协调它吗这不会发生？可能会设置另一个超时功能？我没有检查除Chrome以外的任何浏览器，但我的示例中没有这样的情况。你是在检查我的小提琴，还是只是更新了自己的代码？displayNames函数直到计时器用完才被调用。绝对不需要设置另一个setTimeout。Th重要的是正确理解现有setTimeout中的执行顺序。很高兴听到这个消息！祝你好运！ 
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);
}