Vue中使用setTimeout()定时器延迟执行方法不生效的原因及解决

在工作中遇到一个问题，在发布产品后，弹窗提示成功，2秒后弹窗关闭，跳转列表页。

示例：

setTimeout(function () {
  this.closeModal()
  list.api.reloadData();
},2000)

直接使用上面的代码执行 closeModal() 方法会报错 Uncaught TypeError: this.showModal is not a function ，不能正常执行。 

如果要在 Vue.js 中执行 setTimeout() 方法，应该使用下面的代码：

const that = this;
setTimeout(function () {
  that.closeModal()
  list.api.reloadData();
},2000)

需要注意一下，在 setTimeout() 方法中如果用到 this ，必须在函数外定义一个变量来暂存 this 。

如果不需要使用 this，则不用定义。代码如下：

setTimeout(function () {
  list.api.reloadData();
},2000)

以上，希望对您有所帮助。

推荐阅读：

PHPStorm 如何更改文件的打开方式

jQuery实现元素的鼠标移入移出及点击显示隐藏（微信二维码）

jQuery.dotdotdot多行文本省略号插件的使用方法

阿里巴巴矢量图标库 iconfont 的使用方法

Linux安装JDK+Tomcat+MySQL及发布项目教程