取决于用户输入的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>