javascript如何缓存计时器？
我正在做了一个简单的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>
展开
收起
1
条回答
写回答
写回答
-
社区爱好者，专为云栖社区服务！<!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>2019-07-17 19:14:13赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
