问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

javascript如何缓存计时器？

头像
Janking
    24362835

    我正在做了一个简单的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>
    javascriptjquery
    阅读 4.4k
    3 个回答
    得票最新
    头像
    蒲柳隐逸
      2.4k2298112
      ✓ 已被采纳

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

      头像
      xwartz
        1.3k62733
        头像
        Janking
          24362835

          解决方案：

          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>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题