我正在做了一个简单的tip功能,当多少秒后自动隐藏。如下代码所示:
出现的问题是,当我一个tip还未执行计时器中的动作,就点击不同的目标再次调用tip,会清除掉计时器,而计时器中的动作也仅仅在最新调用tip的目标上执行。
请问,我这个tip该如何设计,才能做到对应清除计时器?
全选复制放进笔记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.none{display: none;}
</style>
</head>
<body>
<div class="test"><button>click me</button><span class="msg"></span></div>
<div class="test"><button>click me</button><span class="msg"></span></div>
<div class="test"><button>click me</button><span class="msg"></span></div>
<script type="text/javascript">
$.extend({
tip: function(options) {
var param = $.extend({
obj: "#message",
text: '',
timeout: 3000,
}, options);
clearTimeout($.tipTime);
var obj = param.obj instanceof $ ? param.obj : $(param.obj);
obj.html(param.text).removeClass('none');
$.tipTime = setTimeout(function() {
obj.addClass('none');
}, param.timeout);
},
tipTime: null
});
$('button').on('click', function(event) {
var $this = $(this);
$.tip({obj:$this.next('span'),text:"显示信息,3秒后隐藏"})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.none{display: none;}
</style>
</head>
<body>
<div class="test"><button>click me</button><span class="msg"></span></div>
<div class="test"><button>click me</button><span class="msg"></span></div>
<div class="test"><button>click me</button><span class="msg"></span></div>
<script type="text/javascript">
$.extend({
tip: function(options) {
var param = $.extend({
obj: "#message",
text: '',
timeout: 3000,
}, options);
var obj = param.obj instanceof $ ? param.obj : $(param.obj);
var count = obj.data('count') || 1;
clearTimeout(obj.data('count'));
obj.html(param.text).removeClass('none');
obj.data('count',setTimeout(function() {
obj.addClass('none');
}, param.timeout));
}
});
$('button').on('click', function(event) {
var $this = $(this);
$.tip({obj:$this.next('span'),text:"显示信息,3秒后隐藏"});
});
</script>
</body>
</html>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。