事件循环的问题

最新推荐文章于 2024-07-25 15:03:56 发布

卢卢姥爷

最新推荐文章于 2024-07-25 15:03:56 发布

阅读量135

点赞数 3

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_51737813/article/details/137110678

版权

文章讲述了如何在JavaScript代码中通过添加setTimeout来确保在执行异步操作前，先设置dialogVisible.value为true，以解决同步任务与异步任务的执行顺序问题。

摘要由CSDN通过智能技术生成

下面代码中我想先执行dialogVisible.value = false，再去执行dialogVisible.value = true,在实际效果中并不会去先后执行，因为是两个同步任务，虽然有明显先后顺序，不过不明显，我们可以修改这个问题。

function analyBtn(e, sentense, index) {
  isTransModelShow.value = false
  dialogVisible.value = false
  let tarIdentify = e.currentTarget.nextElementSibling.getAttribute('data-identify')
  if (tarIdentify && sentense[index].e == 1) {
    // console.log(profileStore.indexArray, profileStore.indexObject);

    isTransModelShow.value = false
    spanArray.value = []
    let spanArray2 = []
    Array.from(e.target.parentNode.childNodes).forEach(child => {
      // console.log(child);
      if (child.nodeType === 1) {
        let childElement = child as HTMLElement
        if (childElement.getAttribute('data-identify') === tarIdentify) {
          spanArray2.push(child.innerHTML)
        }
      }
    })
    spanArray.value = spanArray2
    //单词定位问题
    if (window.innerWidth <= 768 && window.innerHeight - e.clientY < window.innerHeight * 0.6 + 45) {
      const y = document.documentElement.scrollTop + (e.clientY - 192)
      document.documentElement.scrollTop = y
    }
    dialogVisible.value = true
    api.postAnalyInfo({
        // That he finished writing the composition in such a short time surprised us all.
        sentence: spanArray.value.join('')
      }).then(res => {
        if (res.status == 'OK') {
          if (res.data) {
            console.log(res.data);
            if (res.data.analysis_result) {
              spansObject.value = res.data
            } else {
              dialogVisible.value = false
              ElMessage({
                message: '未分析到该句子',
                type: 'warning'
              })
            }
          }
        } else if (res.status == 'anonymous_user_free_num_limit') {
          if (window.innerWidth > 768) {
            loginDialogVisible.value = true
          } else {
            router.push('/Login')
          }
        } else if (res.status == 'login_user_free_num_limit') {
          if (window.innerWidth > 768) {
            centerDialogVisible.value = true
          } else {
            router.push('/BuyVip')
          }
        }
      })
  }
}
}

解决：给代码加上setTimeout，这种方法可以解决你之前遇到的问题，即确保在执行异步操作之前先设置 dialogVisible.value 为 true，然后再执行异步操作。这样做的原因是因为 setTimeout 中的代码会在事件循环的下一个时间片执行，因此会在同步任务执行完成之后，异步任务执行之前执行。

function analyBtn(e, sentense, index) {
  isTransModelShow.value = false
  dialogVisible.value = false
  let tarIdentify = e.currentTarget.nextElementSibling.getAttribute('data-identify')
  if (tarIdentify && sentense[index].e == 1) {
    // console.log(profileStore.indexArray, profileStore.indexObject);

    isTransModelShow.value = false
    spanArray.value = []
    let spanArray2 = []
    Array.from(e.target.parentNode.childNodes).forEach(child => {
      // console.log(child);
      if (child.nodeType === 1) {
        let childElement = child as HTMLElement
        if (childElement.getAttribute('data-identify') === tarIdentify) {
          spanArray2.push(child.innerHTML)
        }
      }
    })
    spanArray.value = spanArray2
    //单词定位问题
    if (window.innerWidth <= 768 && window.innerHeight - e.clientY < window.innerHeight * 0.6 + 45) {
      const y = document.documentElement.scrollTop + (e.clientY - 192)
      document.documentElement.scrollTop = y
    }
    //将dialogVisible.value = true置于dialogVisible.value = false之后
    setTimeout(() => {
      dialogVisible.value = true
      api.postAnalyInfo({
        // That he finished writing the composition in such a short time surprised us all.
        sentence: spanArray.value.join('')
      }).then(res => {
        if (res.status == 'OK') {
          if (res.data) {
            console.log(res.data);
            if (res.data.analysis_result) {
              spansObject.value = res.data
            } else {
              dialogVisible.value = false
              ElMessage({
                message: '未分析到该句子',
                type: 'warning'
              })
            }
          }
        } else if (res.status == 'anonymous_user_free_num_limit') {
          if (window.innerWidth > 768) {
            loginDialogVisible.value = true
          } else {
            router.push('/Login')
          }
        } else if (res.status == 'login_user_free_num_limit') {
          if (window.innerWidth > 768) {
            centerDialogVisible.value = true
          } else {
            router.push('/BuyVip')
          }
        }
      })
    }, 0)
  }
}