我想在用户停止输入后通过输入获取任何用户搜索。然后我想将它传递给 giphy api 但我在传递变量/结果时遇到问题。这是我的代码:
const mainInput = document.querySelector(".main-input");
mainInput.addEventListener('keyup', getUserQuery);
function getUserQuery(e) {
let timeout = null;
let userQuery;
clearTimeout(timeout);
timeout = setTimeout(function() {
return userQuery = mainInput.value;
},300)
return userQuery;
}
//function makeUrlForSearch(getUserQuery) {
// let a = getUserQuery();
// console.log(a);
//}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
font-size: 10px;
}
.header {
padding: 1rem;
margin: 1rem auto;
}
.header-title {
font-size: 2rem;
}
.main-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wyszkuj Gipha!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header"><h1 class="header-title">Wyszukaj Gipha!</h1></header>
<main class="main">
<form class="main-form">
<input type="text" placeholder="Wyszukaj Gipha!" class="main-input" id="main-input">
</form>
</main>
<script src="main.js"></script>
</body>
</html>makerUrlForSearch 不工作，我已经在它上面找了一段时间，但它不工作。
有人可以帮忙吗？这样我就可以在用户停止输入后 300 毫秒后进行搜索，然后在 giphy api 中使用它，但我不能这样做:(
最佳答案
您提供的代码中存在几个问题:
- 在
getUserQuery函数中，您将在异步setTimeOut设置其值之前返回userQuery。 makeUrlForSearch函数正在调用 getUserQuery 但从未被调用。我将其切换为getUserQuery调用makeUrlForSearch函数- 在
getUserQuery中，超时声明总是会清除以前的超时。我将let timeout = null指令移到您的getUserQuery函数之外，使其成为全局指令，以便getUserQuery调用可以清除之前的超时。
const mainInput = document.querySelector(".main-input");
mainInput.addEventListener('keyup', getUserQuery);
let timeout;
function getUserQuery(e) {
clearTimeout(timeout);
timeout = setTimeout(function() {
makeUrlForSearch(mainInput.value);
},300);
}
function makeUrlForSearch(getUserQuery) {
//let a = getUserQuery();
console.log(getUserQuery);
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
font-size: 10px;
}
.header {
padding: 1rem;
margin: 1rem auto;
}
.header-title {
font-size: 2rem;
}
.main-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wyszkuj Gipha!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header"><h1 class="header-title">Wyszukaj Gipha!</h1></header>
<main class="main">
<form class="main-form">
<input type="text" placeholder="Wyszukaj Gipha!" class="main-input" id="main-input">
</form>
</main>
<script src="main.js"></script>
</body>
</html>关于javascript - 使用 Input + keyup + value 然后使用 giphy，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50601530/