js的setTimeout使用问题

作了一个错误提示框的功能,提示框没法主动关闭,要求提示框出现5秒后自动消失;很天然的想到了用setTimeout来实现该功能,实现代码:javascript

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

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

在显示提示框的时候,获取当前时间戳,给提示框加上一个自定义属性,代码以下:异步

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

隐藏提示框的时候,判断要隐藏的提示框是否为当前显示的提示框:ide

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

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

相关文章
相关标签/搜索