Диалог не должен появляться дважды (или более) после того, как функция уведомления о запуске программы запуска - PullRequest
Новая
       12

Диалог не должен появляться дважды (или более) после того, как функция уведомления о запуске программы запуска

0 голосов
/ 18 марта 2019

Я использую уведомление о загрузке для отображения функции сохранения. Проблема в том, что пользователь может сохранить несколько.

Пример. Каждую секунду пользователь нажимает кнопку (Checkbox1, Checkbox2, ...). Каждый флажок вызывает функцию уведомления.

Цель: диалог должен появиться на 3 секунды. Если кнопка была нажата снова в течение 3 секунд, больше не должно появляться диалоговое окно. 3 секунды, но должны начинаться с нуля (ретриггер) 

$(function(){
  $(".btn").on("click",function(){
    $.notify({
      title: 'This dialog should appear only once',
      icon: 'glyphicon glyphicon-star',
      message: ""
    },{
      type: 'info',
      animate: {
		    enter: 'animated fadeInUp',
        exit: 'animated fadeOutRight'
      },
      placement: {
        from: "bottom",
        align: "left"
      },
      offset: 20,
      spacing: 10,
      z_index: 1031,
      timer: 3000,
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.5/bootstrap-notify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary">click me</button>

1 Ответ

1 голос
/ 18 марта 2019

Вы можете использовать событие onClosed , которое сообщит вам, когда уведомление закончилось, пока оно открыто, вы можете запретить его повторное открытие с флагом, которое вы можете изменить при срабатывании события onClosed... 

$(function(){
  var busy = false;
  $(".btn").on("click",function(){
    
    
    if(!busy) {
      busy=true;
    $.notify({
      title: 'This dialog should appear only once',
      icon: 'glyphicon glyphicon-star',
      message: ""
    },{
      type: 'info',
      animate: {
		    enter: 'animated fadeInUp',
        exit: 'animated fadeOutRight'
      },
      placement: {
        from: "bottom",
        align: "left"
      },
      offset: 20,
      spacing: 10,
      z_index: 1031,
      timer: 3000,
      onClosed: function() {
        busy=false;  
      }
    });
    } 
    
    
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.5/bootstrap-notify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary">click me</button>
...