取決於用戶輸入的Javascript自定義排序功能

Question

我正在嘗試爲Javascript array.sort方法進行自定義比較回調函數。它應該根據用戶輸入返回一個值。

該回調函數被調用時，它應該等到用戶單擊按鈕。根據點擊的按鈕，函數會知道兩個元素中的哪一個更大，並返回相應的結果（1或-1）。

我知道等待用戶輸入的唯一方法是使用事件偵聽器函數，但我不知道如何將它適配到我必須傳遞給array.sort()方法的自定義函數。

這是我試着用的代碼;我知道這個代碼將無法正常工作：

var array=["a","b","c"]; 
array.sort(function(a,b){ 
    var result; 

    $("#button1").click(function(){ 
     result = 1; 
    }); 

    $("#button2").click(function(){ 
     result = -1; 
    }); 
    return result; 
} 

我開始認爲這是不可能使用array.sort函數用於此目的。

有沒有辦法做到這一點？

Answer 1

你可以做到這一點，醜陋的方式，通過利用window.confirm方法，它具有行爲等待你的代碼，直到用戶進行的另外執行關閉由要麼選擇確定或彈出取消：

array=["a","b","c"]; 
 
array.sort(function(a,b){ 
 
    var a_before_b = confirm("'" + a + "' will be sorted before '" + b 
 
          + "'. Cancel to order differently."); 
 
    return a_before_b ? -1 : 1; 
 
}); 
 
document.body.innerHTML = '<p>Array sorted: ' + array + '</p>';

<p>You will get 2 to 3 pop up dialogs to sort [a, b, c]</p>

要通過正常交互讓用戶答案，而不是通過模態對話框，並仍然使用標準排序方法，是一個艱鉅的任務。

一個想法是保持給定答案的列表，並在每次有新答案可用時重複排序，通過排序回調函數提供答案。

一旦沒有給出答案的比較出現，您就會向用戶展示該比較結果，並以任何順序完成其餘類型。該排序的數組將被忽略，直到您對所有比較都有答案爲止。

的代碼是很長，主要是因爲與網頁進行互動：

var array = ['a', 'b', 'c']; 
 
var answers = []; 
 
var questionTemplate = "Order '#' before or after '#'?"; 
 
var answerTemplate = "The array is sorted. Result: #."; 
 

 
function logMsg(msg) { 
 
    $($('#log')[0].insertRow(-1).insertCell(-1)).text(msg); 
 
} 
 

 
function answer(order) { 
 
    // keep track of answers 
 
    answers.push(order); 
 
    // show answers also in a log table 
 
    logMsg($('#question').text() + ' - ' + (order<0? 'Before' : 'After')); 
 
    askNext(); 
 
} 
 

 
function askNext() { 
 
    var arrayCopy = array.slice(0); // take real copy 
 
    var questionNo = -1; 
 
    arrayCopy.sort(function(a,b){ 
 
     questionNo++ 
 
     if (questionNo < answers.length) { 
 
      // we already asked this, so use that answer 
 
      return answers[questionNo]; 
 
     } 
 
     if (questionNo == answers.length) { 
 
      // put question to user: 
 
      $('#question').text(questionTemplate.replace('#', a).replace('#', b)); 
 
     } 
 
     // don't care for now, just finish it. We need first to 
 
     // get an answer, and will then restart the sort. 
 
     return -1; 
 
    }); 
 
    if (array.length == answers.length) { 
 
     // Array is now sorted according to answers: 
 
     // Hide question section 
 
     $('#questionDiv').hide(); 
 
     // Show the result 
 
     logMsg(answerTemplate.replace('#', arrayCopy)); 
 
    } 
 
} 
 

 
function reset() { 
 
    $('#array').text(array); 
 
    $('#questionDiv').show() 
 
    $('#log').html(''); // empty log table 
 
    answers = []; 
 
    askNext(); 
 
} 
 

 
// Set up click handlers 
 
$('#reset').click(reset); 
 
$('#before').click(answer.bind(null, -1)); 
 
$('#after').click(answer.bind(null, 1)); 
 
reset();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>The array <span id="array"></span> will be sorted by asking you questions:</p> 
 
<table id="log"></table> 
 
<div id="questionDiv"> 
 
    <p id="question" style="font-weight: bold"></p> 
 
    <button id="before">Before</button><button id="after">After</button> 
 
</div> 
 
<button id="reset">Restart</button>