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

关于延迟顺序显示， 怎么敲代码才能优雅实现？

头像
erichooooow
    22911630

    鼠标移入<p id="test">test</p>, 2秒后在<p id="info"></p>中提示mouseenter.

    鼠标移出<p id="test">test</p>, 在<p id="info"></p>中提示mouseleave.

    要求leave的信息必须等mouseenter显示后，再显示（有顺序)。 应该怎么写事件？

    javascript
    阅读 1.8k
    2 个回答
    得票最新
    头像
    小明
      1.3k310

      Try this:

      var $test = $('#test'),
    $info = $('#info'),
    status;

$test.on('mouseenter',function(){
    status = "";
    $info.text('mouseenter').fadeOut(0).delay(2000).fadeIn(300, function(){
        status === "out" ? $(this).text('mouseleave') : status = "in";
    });
});

$test.on('mouseout',function(){
    status === "in" ? $info.text('mouseleave') : status = "out";
});
      头像
      toBeTheLight
        16.6k41634
        <body>
<span id="btn">11111111111111</span>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var $btn = $('#btn');
var eventCallbacks = [];
var timer = null;
$btn.on('mouseenter',function(){
    clearTimeout(timer);
    eventCallbacks = [];
    eventCallbacks.push(function(){
        $btn.text('in');
    });
    var timer = setTimeout(function(){
        for(var i=0;i<eventCallbacks.length;i++){
            debugger;
            eventCallbacks[i]();
        }    
    },2000)            
});
$btn.on('mouseout',function(){
    eventCallbacks.push(function(){
        $btn.text('out');
    })
});

</script>

        这么写能实现，就是看起来有些丑。

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