javascript如何缓存计时器？

我正在做了一个简单的tip功能，当多少秒后自动隐藏。如下代码所示：
出现的问题是，当我一个tip还未执行计时器中的动作，就点击不同的目标再次调用tip，会清除掉计时器，而计时器中的动作也仅仅在最新调用tip的目标上执行。
请问，我这个tip该如何设计，才能做到对应清除计时器？

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);
            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>

楼主可以看下 power-tip的源码学习下

http://stevenbenner.github.io/jquery-powertip/

解决方案：

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>

setTimeout()会返回一个标示此程序的ID，只要clearTimeOut(id)貌似就可以了。PS:我是新手，只是随便说说,有任何问题希望题主不要介意。

【热门文章】