问答博客资讯标签用户活动
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

怎么防止连续点击后事件重复出现？

头像
五条悟
    2.8k2433803

    我有个 jquery function 事件是会出现 alert

    $('.notification-message').hide().stop();
$('.notification-message').fadeIn('fast').delay(2000).fadeOut('fast');

    执行之前会 hide 和 stop
    但是当我连续按，他还是无法「只显示一个」还是会不断出现 notification-message
    这如何防止？

    jqueryjavascript
    阅读 2.7k
    2 个回答
    得票最新
    头像
    rain
      5036116240
      ✓ 已被采纳

      不是很明白你要表达什么，以下效果为点击出现，2s后自动消失，未消失期间点击按钮不会有反应

      <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
  <style>
  div{
  width:350px;
  height:150px;
  background:skyblue;
  display:none;
}
  </style>
<body>
    <div class="notification-message">
      
  </div>
  <button>
    点我
  </button>
  <script>
    $('button').on('click',function(){
          if($('.notification-message').is(":hidden")){
          $('.notification-message').stop().fadeIn('fast').delay(2000).fadeOut('fast');
            }
    })
  </script>
</body>
</html>

      clipboard.png

      clipboard.png

      头像
      夜影
        1.5k21936

        (老哥，你都2.7k了= =)
        额外设置个变量应该能解决你的问题（es6的promise应该也可以，没研究过）, demo:

        var isFading = false;
$("#a").click(function () {
    if (isFading) {
        return false;
    }
    isFading = true;
    $('.notification-message').hide().stop();
    $('.notification-message').fadeIn('fast').delay(2000).fadeOut('fast', function () {
        isFading = false;
    });
})

        这也可以同样道理应用于防重复提交

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