設置值后，文本區域消失

Question

這是我想做的事情：

通過單擊“輸入名稱”輸入縮寫（例如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>

Answer 1

您至少有幾個問題，但是主要問題是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);
}

設置值后，文本區域消失

問題描述

1 個解決方案

解決方案1
0 已采納 2013-04-01 16:50:06

設置值后，文本區域消失

問題描述

1 個解決方案

解決方案1 0 已采納 2013-04-01 16:50:06

解決方案1
0 已采納 2013-04-01 16:50:06