开发者社区> 问答> 正文

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>

展开
收起
云栖技术 2016-05-25 14:07:26 1998 0
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
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript异步编程 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载