javascript - 通过 Javascript 功能实时编辑 HTML

Question

我试图在用户点击一个按钮时显示一个“spinner loader”，该按钮会触发一个需要一些时间的函数，这样用户就知道后端正在做这些事情。我正在编写 VueJS 前端。仅在函数完成其工作后才显示微调器，这是我不希望看到的，因为我的目标是只要函数运行且用户等待，微调器就会显示。

// Unlock is a prompt page that contains a "Success" button and a "Cancel" button 

<unlock v-model="password" @cancel="cancel" @success="add"/>
<icon type="spinner" class="spin" v-if="loading"></icon>

methods: {
    async add() {
        this.loading = true
        this.error = ''
        await this.$store.dispatch('DO_SOMETHING', { users: this.selected_users, password: this.password })
        this.loading = false
        this.$store.dispatch('TOGGLE_PROMPT', '')
    }
...
...
}

我希望微调器在函数启动后立即显示，直到它以任何一种方式加载另一个页面时完成。只要我们等待 await this.$store.dispatch('DO_SOMETHING') 完全执行，我就希望显示微调器。问题是，它仅在整个功能完成后才显示。

我尝试使用 async 和 await，没有结果。是否可以直接在 HTML-VueJS 中显示元素，或者这是我们无法通过 Javascript 实现的？

提前谢谢你。

编辑: Action

DO_SOMETHING: ({ commit, dispatch, state }, { users, password }) => {
    commit('SET_LOADING', true)
    const results = JSON.stringify(users.map( x => {
        if (...) delete ...
        if (...) delete ...
        return x
    }))
    API.addUser(results, password || state.password)
    // refresh page
    return dispatch('FETCH_PAGE')
},

API.addUser 调用后端，其中运行一个 Java 函数，在数据库中进行修改。

编辑 v2: 我添加了以下 console.log()

    console.log("1")
    await this.$store.dispatch('DO_SOMETHING', { users: this.selected_users, password: this.password })
    console.log("6")




    console.log("2")
    API.addUsers(results, password || state.password)
    console.log("5")

下面是 API/addUsers() 函数。

    console.log("3")
    const results = JSON.parse(window.UserbaseApplication.addUsers(users, password))
    console.log("4")

正如预期的那样，结果是: 1个 2个 3个 4个 5个 6

因此该函数正按预期等待 API 的返回。

Answer 1

不确定 Vue，但在 vanilla JS 中:

假设您让用户按下一个按钮，该按钮调用一个运行某些计算的函数。在计算期间，您有一个准备就绪的加载器。

const button = document.querySelector(".mybutton")
button.addEventListener('click', () => {
  const loader = document.querySelector(".myloader");
  loader.style.display = "inline-block";
  // we are assuming the loader covers the whole width & height, with a black filter in the background
  // therefore, we don't have to hide other elements
  myfunction(...).then(
    res => {   
      // hide the loader after successful promise call
      loader.style.display = "none";
    });
}); 

这个例子假设你的函数返回一个 promise

同样可以用 async/await 实现

const myfunction = async function() {
  const res = await .... some computation
  return res
}

const button = document.querySelector(".mybutton")
    button.addEventListener('click', () => {
      const loader = document.querySelector(".myloader");
      loader.style.display = "inline-block";
      // we are assuming the loader covers the whole width & height, with a black filter in the background
      // therefore, we don't have to hide other elements
      const result = myfunction();
      loader.style.display="none";
    });