通过 Javascript 功能实时编辑 HTML答案

【问题标题】：Edit HTML through Javascript function real time通过 Javascript 功能实时编辑 HTML
【发布时间】：2020-01-27 20:04:54
【问题描述】：

当用户单击一个按钮来触发需要一些时间的功能时，我试图显示一个“微调器加载程序”，因此用户知道这些事情正在后端完成。我在前端写 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 的返回，正如预期的那样。

【问题讨论】：

this.$store.dispatch('DO_SOMETHING') 真的是 async 函数吗？
我还希望您的 action 未声明为 async 函数。你能告诉我们action吗？另外，微调器是什么意思，只有在整个功能完成后才会显示；由于this.loading = false，它应该在函数完成后隐藏
如果是异步的，你应该在API.addUser前面使用await
@MarcRo 请参见上文。我的意思是，一旦新页面加载，就会发生这种情况：this.$store.dispatch('TOGGLE_PROMPT', '') 微调器会显示 0.1 秒然后消失。
@Ja9ad335h 试过了。没用。结果相同，函数完成执行后显示微调器。也许我在vue-js 中做错了什么或者有解决方法？

标签： javascript html vue.js

【解决方案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";
    });
});

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

同样可以通过 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";
    });

【讨论】：