Question

我正在尝试编写一个网页，为用户提供一个列表中的两个选项，并询问他们哪个更好。我重复此操作，直到对列表进行排序。我在理解如何在javascript中执行此操作时遇到了麻烦。我已经尝试了一些方法，但是它们都没有起作用。

如果这是用C ++编写的，我只需要编写一个类，然后重载<运算符即可通过cin或其他方式请求用户输入，但这在网页中实际上并不起作用。我正在尝试类似的操作：

class Character {
    constructor(initName, initPicture, initColor) {
            this.name = initName;
            this.picture = initPicture;
            this.color = initColor;
    }
    async set1() {
            console.log("should display " + this.name);
            document.getElementById("pic1").src = this.picture;
            document.getElementById("name1").innerHTML = this.name;
            document.getElementById("character1").style.background = this.color;
            console.log("displayed " + this.name);
    }
    async set2() {
            console.log("should display " + this.name);
            document.getElementById("pic2").src = this.picture;
            document.getElementById("name2").innerHTML = this.name;
            document.getElementById("character2").style.background = this.color;
            console.log("displayed " + this.name);
    }
}
var decision = false;
async function compare(a, b) {
    console.log("comparing " + a.name + " to " + b.name);
    a.set1();
    b.set2();
    console.log("after display");
    const nameA = a.name;
    const nameB = b.name;
    /*while (!decision) {
    }*/
//      var result = prompt("Who is better, " + a.name + " or " + b.name
 + "?");
    let comparison = 0;
    if (result === nameA) {
            comparison = 1;
    }
    else if (result === nameB) {
            comparison = 0;
    }
    console.log(comparison);
    return comparison;
}

从本质上讲，这两行注释是尝试查看如果函数停止将发生的两种方式。发生这种情况时，任何内容都不会通过set1或set2呈现到屏幕上（我知道这是因为console.log而被调用）。

最终，我打算将比较结果存储在数据库中，并检查是否已经进行了比较。用户将通过单击div之一（尚未实现）进行选择。

我并不是真正希望对代码本身进行“调试”，因为它在技术上是可行的。我只是不确定如何解决这个问题。我不认为我现在的做法是最好的。

顺便说一句，我不使用库排序功能，因为它不喜欢异步功能。

您将使用哪种算法/结构来编写一个根据用户选择哪个列表排序列表的列表？

Answer 1

您在javascript中所做的所有操作都是异步的（promt除外），因此您只需要使等待的用户单击div之一即可。为此，我们只是构建了一个Promise，用于解决在某个元素上发生click事件时的情况：

function wasClicked(el) {
  return new Promise((resolve) => {
    el.addEventListener("click", function handler() {
        el.removeEventListener("click", handler);
        resolve(el);
    });
  });
}

然后您可以将比较更改为：

static async function compare(a, b) { // <- should be static
  console.log("comparing " + a.name + " to " + b.name);
  a.set1();
  b.set2();
  console.log("after display");

  const pic1 = document.getElementById("pic1");
  const pic2 = document.getElementById("pic2");

  const choice = await Promise.race(wasClicked(pick), wasClicked(pic2));
 return choice === pic1 ? 1 : -1;
}

现在我们只需要一种对数组进行异步排序的方法，但是那很简单：

 async function asyncSort(array, comparator) {
   for(let i = 0; i < array.length - 1; i++) {
     if(await comparator(array[i], array[i + 1]) < 0) {
        ([array[i], array[i + 1]] = [[array[i + 1], array[i]]);
        i -= 2;
     }
   }
}

因此您现在可以这样做：

asyncSort(someArray, Character.compare);

PS：按照惯例，类应仅包含属于该类“特征”的方法，例如Character.speak()，set1和set2都不这样做，因此它们不应该是Character的方法

根据网页上的用户输入对列表进行排序

1 个答案: