js的setTimeout使用问题

做了一个错误提示框的功能，提示框无法主动关闭，要求提示框出现5秒后自动消失；很自然的想到了用setTimeout来实现该功能，实现代码：

el.fadeIn(500);//淡入效果
setTimeout(function(){
  msgPanel("hiden",id);//隐藏提示框
},5000);

但是问题很快出现了，当连续提交的时候，提示框有时候会出现后很快就消失，没有达到想要的效果，这里从js的运行机制说起，js是单线程执行，先按顺序执行完主体代码，遇到setTimeout、鼠标点击等事件时，加入异步队列，主体代码执行完后开始执行队列中的代码，上面的代码在短时间内多次显示提示框时，会出现之前的隐藏代码隐藏最后出现的提示框，这里希望的效果是只隐藏最后一次出现的提示框。加入如下机制：

在显示提示框的时候，获取当前时间戳，给提示框加上一个自定义属性，代码如下：

var index  = new Date().getTime();
el.attr("index",index);

隐藏提示框的时候，判断要隐藏的提示框是否为当前显示的提示框：

el.fadeIn(500);//淡入效果
setTimeout(function(){
  var tempIndex = $("#" + id).attr("index");
  if(index == tempIndex){
    msgPanel("hiden",id);//隐藏提示框
  }
},5000);

这样就能达到想要的效果了。

转载于:https://my.oschina.net/u/2367511/blog/749488