Question

我需要在用户停止键入例如半秒钟的时间后提交表单。

您应该保持输入的重点，如果再输入几个字符，它仍应继续提交。

我更喜欢 香草JS ，但 jQuery 也可以。

我尝试使用client.close();事件将超时设置为半秒，然后我先使用了const {MongoClient} = require('mongodb'); MongoClient.connect('mongodb://localhost:27017', { useNewUrlParser: true }).then((client) => { console.log('Connected to MongoDB server') const dbOld = client.db('db01') // drop db01 dbOld.dropDatabase().then(() => { console.log(`${dbOld.databaseName} drop successfully `) // create db01 again const dbNew = client.db('db01') console.log(`${dbNew.databaseName} recreated successfully `); },e => console.log(e)) })和% Create image canvas canvas = zeros(320, 320); I = uint8(canvas); imshow(I) a_x = 122.6544; a_y = 234.9782; b_x = 165.9290; b_y = 126.9200; hold on plot([a_x, b_x], [a_y, b_y] ) % Plot cartesian coordinate system figure() plot([a_x, b_x], [a_y, b_y]) xlim([0 320]) ylim([0 320]) axis equal grid on

onKeydown

preventDefault()

我希望用户能够在输入完毕后一秒钟内输入内容，以提交搜索。焦点模糊应保留在输入上，以便它们可以继续键入/搜索。

Answer 1

这将触发onkeyup，我发现这是启动自动搜索的最佳方式，

let searchText = document.getElementById('search_input');
searchText.addEventListener("keyup", search);

let timeout = null;

function search() {
  if (timeout) {
    window.clearTimeout(timeout);
  }
  
  timeout = setTimeout(function () { fnFillGrid(); }, 500);
}

function fnFillGrid() {
  console.log('Lala');
}

<form action="#">
  Search: <input id="search_input" type="search" name="q">
</form>

Answer 2

基本上，您需要捕获上次键入的键与您的特定等待时间之间的时间。在这种情况下，POST请求在无输入1秒钟后执行。这将是一个真实的示例（发布到import FaClipboardList from 'react-icons/fa以模拟POST请求）。您可以检查网络标签（在开发工具中）以查看它。

在此还应该指出jsonplaceholder已过时（请参见https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which）

KeyboardEvent.which

const postMessage = async (message) => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
        title: 'title',
        body: message,
        userId: 1
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8"
      }
    });
    return response.json();
}

let time = null;
const textBox = document.getElementById('myTextbox');
textBox.addEventListener('keyup', async (e) => {
  time = new Date().getTime();
  setTimeout( async () => {
    const currentTime = new Date().getTime();
    const timeDiff = currentTime - time;
    if (timeDiff >= 1000) {
    	const response = await postMessage(textBox.value);
        console.log('response', response);
    }
  }, 1000);
});

Answer 3

此解决方案基于两个想法：

捕获键
用户停止键入后，我们发送async POST请求。

对于我们的第一个目标，我们将使用addEventListener并监听keyup事件。当用户释放键盘上的键时，将发生此事件。

对于第二个目标，我们需要捕获上一次keyup事件之间的时间，并将其与WAITING_TIME常量进行比较，在本示例中为500 ms。

此外，我们将使用async function声明来定义fnFillGrid异步函数。这将返回一个AsyncFunction对象作为Promise，该对象将由async function返回的值来解析，或者被async function内部抛出的未捕获异常所拒绝。 fnFillGrid也将实现fetch()方法，该方法使我们能够发出类似于XMLHttpRequest的网络请求。主要区别在于fetch()方法使用Promises，它启用了更简单，更简洁的API，避免了回调地狱，并且必须记住XMLHttpRequest的复杂API。

现在，我们可以调用await()运算符来等待响应Promise。

这是一个实用的代码段：

const WAITING_TIME = 500;
let startTime;
let searchText = document.getElementById('search_input');
searchText.addEventListener('keyup', async(e) => {
  startTime = new Date().getTime();
  setTimeout(async() => {
    let currentTime = new Date().getTime();
    let timeDiff = currentTime - startTime;
    if (timeDiff >= WAITING_TIME) {
      const response = await fnFillGrid(searchText.value);
      console.log('response', response);
    }
  }, WAITING_TIME);
});

async function fnFillGrid(message) {
  let result = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      query: message,
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  });
  
  return result.json();
}

<form action="#">
  Search: <input id="search_input" type="search" name="q">
</form>

完成输入后如何提交表格？（JavaScript异步）

3 个答案:

完成输入后如何提交表格？ （JavaScript异步）

3 个答案:

完成输入后如何提交表格？（JavaScript异步）