Textarea исчезает после установки значения

Вот что я пытаюсь сделать:Textarea исчезает после установки значения

Тип инициалами (например, MS, AK, LT), нажав на «Введите имена». Это сохраняет строку, которая затем превращается в массив (nameArray), чтобы получить каждый набор инициалов. После случайного упорядочивания я хочу поместить некоторые из инициалов в текстовые области, но в этом все происходит неправильно.

Вот что случилось:

дисплей инициалов на мгновение, а затем исчезает после выполнения функции. (ТАКЖЕ, я пытаюсь получить 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 # upcoming_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

Это работает! Еще раз спасибо, Нейт. Я бы поднял его, если мог. –

Textarea исчезает после установки значения

ответ

Смежные вопросы