javascript - 更改输入值时如何重置表单的输入值？

Question

在我提交带有 Actor 姓名的表格并列出电影后，如果我想通过输入另一个名字再次搜索，我第一次点击回车时，它会返回与第一次搜索相同的电影，如果我再次单击输入新名称的输入，它会列出该 Actor /女 Actor 的电影。所以基本上它会在每秒提交时列出电影(假定 Actor /女 Actor 的名字已更改)。有没有解决的办法？我尝试在表单提交函数中添加 sessionStorage.clear()，但它不起作用。我还尝试了 actor.value.clear() 但它清除了表单输入的值并且它没有列出任何内容。非常感谢任何帮助，非常感谢。这是代码:

const form = document.getElementById("form");
form.addEventListener("submit", (e)=>{
    var actor = document.getElementById("actor").value;
    var byActor = document.getElementById("byActor");
    byActor.innerHTML = actor;
    discoverByActor(actor);
    moviesByActor();
    e.preventDefault();
})
function discoverByActor(actor){
    axios.get("https://api.themoviedb.org/3/search/person?api_key=<API_KEY>&language=en-US&query="+actor+'&page=1&include_adult=false')
        .then((response)=>{
            let actorId = response.data.results[0].id;
            sessionStorage.setItem("theActorId", actorId);
        })
};
function moviesByActor(){
    let actorId = sessionStorage.getItem("theActorId");
    axios.get("https://api.themoviedb.org/3/discover/movie?api_key=<API_KEY>&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_people="+actorId)
        .then((response)=>{
            console.log(response);
            let movies = response.data.results;
            let output = "";

            $.each(movies, (index, movie)=>{
                output +=`
                <div class="card">
                        <img src="http://image.tmdb.org/t/p/w300/${movie.poster_path}" onerror="this.onerror=null;this.src='../images/image2.png';">
                        <h3>${movie.title}</h3>
                        <p>${movie.vote_average} <strong>IMDB Rating</strong></p>
                        <p>Release date: <strong>${movie.release_date}</strong></p>
                        <a onclick="movieSelected('${movie.id}')" class="btn" href="#"> Movie Details </a>
                    </div>
                `
            })
            let moviesInfo = document.getElementById("movies");
            moviesInfo.innerHTML = output;
            //Display pages buttons.
            let pages = document.querySelector(".pages");
            pages.style.display = "flex";
            var actor = document.getElementById("actor");
        })
}

Answer 1

sessionStorage.setItem("theActorId", actorId);

在您收到来自 axios.get 的响应之前不会发生。但是，您在此之前调用了 moviesByActor，这会执行

let actorId = sessionStorage.getItem("theActorId");

您可能想要做的是:

form.addEventListener("submit", (e)=>{
    // ...
    discoverByActor(actor).then(moviesByActor);
    // ...
})

function discoverByActor(actor){
    return axios.get("https://api.themoviedb.org/3/search/person?api_key=<API_KEY>&language=en-US&query="+actor+'&page=1&include_adult=false')
    .then((response)=>{
        let actorId = response.data.results[0].id;
        sessionStorage.setItem("theActorId", actorId);
    })
};

此外，如果您在 session 中实际上不需要 actorId，您可以这样做:

form.addEventListener("submit", (e)=>{
    // ...
    discoverByActor(actor).then(moviesByActor);
    // ...
})

function discoverByActor(actor){
    return axios.get("https://api.themoviedb.org/3/search/person?api_key=<API_KEY>&language=en-US&query="+actor+'&page=1&include_adult=false')
    .then((response)=>{
        return response.data.results[0].id;
    })
};

function moviesByActor(actorId) {
    axios.get( /* ... */ );
    // ...
}

JavaScript 有一个基于“事件循环”的并发模型。事件循环模型的一个非常有趣的特性是，JavaScript 与许多其他语言不同，它从不阻塞(alert 或同步 XHR 除外，我相信还有其他一些)。

axios.get(url).then(doSomething) 是异步的，所以当你这样做时，你是在告诉计算机“去获取这个 url 上的任何内容，一旦你获得响应，将响应发送到 doSomething。与此同时，继续运行此代码的其余部分。

所以当你执行 discoverByActor(actor); moviesByActor();，您正在调用 moviesByActor 即使您没有从 discoverByActor 收到任何信息。

当然，如果你不能控制事情发生的顺序，就很难编程，所以为了解决这个问题，我们使用所谓的Promises。 .

有了 promise ，我们可以说，使用 axios.get 获取此 url，.then 使用该结果做另一件事，.then 使用 that 返回的任何东西来做这件事。

所以，我让 discoverByActor 返回 axios.get 这样我就可以访问 .then 方法，这样我就可以忍受moviesByActor 将拥有运行所需的数据。