Javascript - 在調用函數之前需要重置所有頁面元素

Question

我有一個創建隨機計劃的函數。在點擊一個按鈕時，我想重置所有值並重新創建另一個時間表。與其將所有元素重新初始化爲其原始值，我發現重新加載頁面會更容易。當我有兩個單獨的按鈕，一個生成，時間表和一個重新加載，這完美的作品。

但是，我需要一個按鈕來執行這兩個操作，但是當我在函數的開頭調用reload時，調度會被填充並自動重新加載。

function generateSchedule() { 

    window.location.reload(); 

    for (var i = 0; exams_scheduled.length < TOTAL_EXAMS; i++){ 

     var time = randomNumber(3); // 3 exam timeslots per day 
     var day = randomNumber(6); // 6 exam days per week 
     var week = randomNumber(2); // 2 week period 

     var weekday = day + '' + week; 
     var exam_id = "exam-" + time + '' + weekday; 

    if ((exam_count[weekday] < EXAMS_PER_DAY) && (!exams_scheduled.includes(exam_id))) { 
     exam_count[weekday] += 1; 
     exams_scheduled.push(exam_id); 

     document.getElementById(exam_id).className += "exam"; 
    } 
    } 
} 

這是一個codepen，它在生成函數的開始時調用reload。如您所見，計劃已生成並自動重新加載。

http://codepen.io/skyro/pen/apQwWY

任何人都可以提出一個解決辦法？

Answer 1

那麼從我能理解的是，你想按鈕來重新加載你的頁面，但是它確實會調用新的時間表，是嗎？ 如果是這樣，您可以使用計劃中的window.onload，以便在頁面加載後立即自動召喚它。 或者......也許...... 通過簡單地設置觸發按鈕時的延遲，setTimeout(callNewSchedule, 100)函數將有用 。懷疑這會工作。因爲該頁面重新加載它會丟失其之前的所有數據，並且功能永遠不會發生。 如果是這樣的話，那麼onload是最好的選擇。

Answer 2

花了一段時間，但似乎它的工作原理。您無需重新加載頁面即可獲取新值。

function getRandomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
} 
 

 
const EXAMS_PER_DAY = 2; 
 
const TOTAL_EXAMS = 5; 
 

 
var exam_days = { 
 
    00: 0, 
 
    10: 0, 
 
    20: 0, 
 
    30: 0, 
 
    40: 0, 
 
    50: 0, 
 
    01: 0, 
 
    11: 0, 
 
    21: 0, 
 
    31: 0, 
 
    41: 0, 
 
    51: 0 
 
}; 
 

 
var exam_array = []; 
 

 
function generateSchedule() { 
 
    exam_array = []; 
 
    var c = [[0,1,2],[0,1,2,3,4,5],[0,1]]; 
 
    
 
    for (var i = 0; i < c[0].length; i++) { 
 
    for (var j = 0; j < c[1].length; j++) { 
 
     for (var k = 0; k < c[2].length; k++) { 
 
     b = `${c[0][i]}${c[1][j]}${c[2][k]}`; 
 
     document.getElementById('exam-' + b).style.background = 'transparent'; 
 
     } 
 
    } 
 
    } 
 

 
    for (var i = 0; exam_array.length < TOTAL_EXAMS; i++) { 
 

 
    var time = getRandomInt(0, 2); 
 
    var day = getRandomInt(0, 5); 
 
    var week = getRandomInt(0, 1); 
 

 
    var exam_id = "exam-" + time + day + week; 
 
    if (exam_days[day + '' + week] < EXAMS_PER_DAY && !exam_array.includes(exam_id)) { 
 
     exam_days[day + '' + week] += 1; 
 
     exam_array.push(exam_id); 
 
     document.getElementById(exam_id).style.background = "green"; 
 
    } 
 
    } 
 
}

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <th></th> 
 
    <th scope="col">M</th> 
 
    <th scope="col">T</th> 
 
    <th scope="col">W</th> 
 
    <th scope="col">R</th> 
 
    <th scope="col">F</th> 
 
    <th scope="col">S</th> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Morning</th> 
 
    <td id="exam-000"></td> 
 
    <td id="exam-010"></td> 
 
    <td id="exam-020"></td> 
 
    <td id="exam-030"></td> 
 
    <td id="exam-040"></td> 
 
    <td id="exam-050"></td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Afternoon</th> 
 
    <td id="exam-100"></td> 
 
    <td id="exam-110"></td> 
 
    <td id="exam-120"></td> 
 
    <td id="exam-130"></td> 
 
    <td id="exam-140"></td> 
 
    <td id="exam-150"></td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Evening</th> 
 
    <td id="exam-200"></td> 
 
    <td id="exam-210"></td> 
 
    <td id="exam-220"></td> 
 
    <td id="exam-230"></td> 
 
    <td id="exam-240"></td> 
 
    <td id="exam-250"></td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <th></th> 
 
    <th scope="col">M</th> 
 
    <th scope="col">T</th> 
 
    <th scope="col">W</th> 
 
    <th scope="col">R</th> 
 
    <th scope="col">F</th> 
 
    <th scope="col">S</th> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Morning</th> 
 
    <td id="exam-001"></td> 
 
    <td id="exam-011"></td> 
 
    <td id="exam-021"></td> 
 
    <td id="exam-031"></td> 
 
    <td id="exam-041"></td> 
 
    <td id="exam-051"></td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Afternoon</th> 
 
    <td id="exam-101"></td> 
 
    <td id="exam-111"></td> 
 
    <td id="exam-121"></td> 
 
    <td id="exam-131"></td> 
 
    <td id="exam-141"></td> 
 
    <td id="exam-151"></td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Evening</th> 
 
    <td id="exam-201"></td> 
 
    <td id="exam-211"></td> 
 
    <td id="exam-221"></td> 
 
    <td id="exam-231"></td> 
 
    <td id="exam-241"></td> 
 
    <td id="exam-251"></td> 
 
    </tr> 
 
</table> 
 
<br /> 
 
<button onclick="generateSchedule();">Generate</button> 
 
<button onclick="location.reload(true);">Reload</button> 
 
<button onclick="window.print();">Print</button>