Блог

Я создал звездный рейтинг для сайта, и мне нужно закрыть div после того, как пользователь нажал на рейтинг. Мне удалось это сделать, но нужно добавить задержку в функцию, чтобы она занимала 2/3 секунды после того, как пользователь нажал на нее.

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

 function testFunction() {
  var x = document.getElementById("video-rating");
  if (x.style.display === "none") {
      x.style=display = "block";
  } else {
      x.style.display = "none";
  }
}
  

Это jquery в моем документе JSP. Если есть способ добавить jquery в функцию, это было бы здорово, но я не уверен в этом.

 <script>
    $('#video-rating').hide(0).delay(4000).show(0);
</script>
  

Редактировать Я должен был быть более ясным, я передал тестовую функцию в onclick в пределах фактических звездных рейтингов, поэтому, когда они нажимаются, в данный момент функция запускается и закрывается!

использование setTimout :

 // Define a timer as global variable so we can cancel it anywehere:
var mytimer; 

function testFunction() {
  //Clear previous click effect if exists:
  clearTimeout(mytimer);

  var x = document.getElementById("video-rating");

  //assigning the timeout to global variable we created before:
  mytimer = setTimeout(function(){
       if (x.style.display === "none") {
           x.style=display = "block";
       } else {
           x.style.display = "none";
       }
   },666); //666 miliseconds equals to 2/3 second
}
  

использование задержки Jquery:

 function testFunction() {
    $("#video-rating").delay(666).hide(0); //or toggle(0) if you want to show on next click
}
  

если вы хотите отменить предыдущий эффект щелчка, вы можете добавить stop() в очередь jquery:

 function testFunction() {
    $("#video-rating").stop().delay(666).hide(0); //or toggle(0) if you want to show on next click
}
  

изменить на

 function testFunction() {
  var x = document.getElementById("video-rating");
  if (x.style.display === "none") {
      x.style=display = "block";
  } else {
      setTimeout(function(){
          x.style.display = "none";
      },3000);
  }
}
  

используйте эту функцию Jquery, чтобы избежать установленного временного интервала

 $("#video-rating").hide('slow');
           (or)
$("#video-rating").hide('fade');