时间戳

首页 > 解决方案 > 每次加载 DOM 内容时阻止 JS 函数运行？

javascript - 每次加载 DOM 内容时阻止 JS 函数运行？

问题描述

我遇到了一个问题，我只想load_mailbox('inbox')在第一次加载页面时运行，但是当提交表单时，我想用其他参数（'sent'）加载邮箱，如下面的代码所示。但我认为正在发生的事情是，由于load_mailbox('inbox')它位于 DOMContentLoaded 事件侦听器中，即使在load_mailbox('sent')完成加载时它也在运行，任何人都可以想出一种方法来阻止它这样做，或者解决这个问题的另一种方法吗？

代码：

document.addEventListener('DOMContentLoaded', function() {

  // By default, load the inbox
  load_mailbox('inbox');

  document.querySelector('#compose-form').onsubmit = function() {

    //Declaring email variables
    const recipients = document.querySelector('#compose-recipients').value
    const subject = document.querySelector('#compose-subject').value
    const body = document.querySelector('#compose-body').value

    //Making API request
    fetch('/emails', {
      method: 'POST',
      body: JSON.stringify({
        recipients: recipients,
        subject: subject,
        body: body
      })
    })
    .then(response => response.json())
    .then(result => {
      console.log(result);
      load_mailbox('sent');
    }); 
  }


});

标签： javascript

解决方案

正如@PatrickEvans 所说，问题在于表单正在执行其默认操作，即重新加载 url，因此通过 return false 阻止它这样做；在提交回调函数结束时修复它！

现在事件监听器及其回调看起来像这样：

document.querySelector('#compose-form').onsubmit = function() {

    //Declaring email variables
    const recipients = document.querySelector('#compose-recipients').value
    const subject = document.querySelector('#compose-subject').value
    const body = document.querySelector('#compose-body').value

    //Making API request
    fetch('/emails', {
      method: 'POST',
      body: JSON.stringify({
        recipients: recipients,
        subject: subject,
        body: body
      })
    })
    .then(response => response.json())
    .then(result => {
      console.log(result);
      load_mailbox('sent');
    });

    return false;
  }

推荐阅读