Bootstrap Vue-有什么方法可以使消息框确认模式超时？

Question

我对JS和stackoverflow都是陌生的，所以请告诉我是否需要提供更多详细信息，或者是否有更好的方法。

我的目标是关闭模态（最好是msgBoxConfirm模态），或者在没有输入的情况下，在设置的时间段后以编程方式“取消”。我尝试将其包装在setTimeout中，然后从.then内部调用超时函数，但两次尝试均失败。

这里是我想添加超时时间的代码的脚手架：

timedModalAlert: function () {
  this.$bvModal.msgBoxConfirm('Session expiration in XX. Press OK to continue.')
  .then(value => {
    if (value == true) {
      // function to refresh token
    } else {
      // function to log user out
    }
  }
  )
}

我的尝试：

timedModalAlert: function () {
  setTimeout (() => {
  this.$bvModal.msgBoxConfirm('Session expiration in XX. Press OK to continue.')
  .then(value => {
    if (value == true) {
      // function to refresh token
    } else {
      // function to log user out
    }
  }
  )
}, 1000)

Answer 1

[setTimeout使您的函数在超时到期后被调用，因此您的所有代码要做的就是将消息框延迟一秒钟。

要实现所需的功能，您需要启动一个计时器，该计时器将导致注销，然后显示消息框。如果用户未单击“确定”或未及时单击，则他们将注销。否则，将取消超时并刷新其会话：

timedModalAlert: function () {
  let modalId
  // Start a timeout, recording the timeout ID for cancelling it
  let timeoutID = setTimeout (() => {
    // function to close the dialog
    this.$bvModal.hide(modalId)
    // OR 
  }, x) // Set the timeout value in ms
  // Display the message box
  modalId = this.$bvModal.msgBoxConfirm('Your session will expire in x. Press OK to continue.')
    .then(value => {
      if (value == true) {
        // Stop the timeout
        clearTimeout(timeoutID)
        // function to refresh token
      } else {
        // function to log user out
      }
    })
}