Thêm Timer Timer, Fade Out/Skip to next nếu timer đạt 0

Question

Tôi thực sự mới với jQuery nhưng quen thuộc với một số ngôn ngữ khác. Gần đây tôi đã mua một kịch bản loại bài kiểm tra và tôi đang cố thêm một bộ đếm thời gian 15 giây đơn giản cho mỗi câu hỏi. Nó chỉ là một bài kiểm tra thú vị, vì vậy không cần phải lo lắng về việc người dùng đang chơi với javascript để tăng thời gian, v.v.

Về cơ bản, nếu người dùng không chọn câu hỏi trong vòng 15 giây, nó sẽ tự động chuyển sang câu hỏi tiếp theo và bộ hẹn giờ bắt đầu lại.

Câu trả lời có thẻ .next và khi được chọn sẽ chuyển sang câu hỏi tiếp theo như mã bên dưới hiển thị (hy vọng).

superContainer.find('.next').click(function() { 

      $(this).parents('.slide-container').fadeOut(500, function() { 
       $(this).next().fadeIn(500) 
      }); 

      return false 
}); 

Vấn đề tôi có là nếu tôi sử dụng setInterval, tôi không biết làm thế nào tôi có thể chọn div thích hợp một lần nữa cho phai nó của chúng tôi và mờ dần trong phần tiếp theo. Tôi đã thử các mã dưới đây và một vài ý tưởng scrappy tương tự nhưng nó không hoạt động, nhưng có lẽ nó sẽ cung cấp cho một ý tưởng tốt hơn về những gì tôi sau khi mặc dù.

superContainer.find('.next').click(function() { 

    $active_count = $count; 

    countInterval = setInterval(function() { 
       $active_count--; 
       if($active_count <= 0){ 
        clearInterval(countInterval); 
        $active_count = $count; 
        $(this).parents('.slide-container').fadeOut(500, function() { 
         $(this).next().fadeIn(500) 
        }); 
       } 
       $('.question-timer').html($active_count); 
      }, 1000); 

      $(this).parents('.slide-container').fadeOut(500, function() { 
       $(this).next().fadeIn(500) 
      }); 

      return false 
}); 

Tôi chỉ sử dụng JQuery một hoặc hai ngày để tránh bất kỳ lỗi rõ ràng và mã lỗi nào! Hãy cho tôi biết nếu bạn cần bất kỳ mã hoặc thông tin nào khác

Answer 1

Điều này khá phức tạp đối với một dự án jQuery đầu tiên.

Knack (trong giải pháp này) là để tính ra hàm goNext có thể được gọi theo hai cách - để phản hồi sự kiện nhấp và phản hồi 15 giây setTimeout(), không phải setInterval().

$(function(){ 
    var questionTimeout = null; 

    function goNext($el) { 
     clearTimeout(questionTimeout); 
     var $next = $el.next(); 
     $el.fadeOut(500, function() { 
      if($next.length > 0) { 
       $next.fadeIn(500, function() { 
        questionTimeout = setTimeout(function() { 
         goNext($next); 
        }, 15000); 
       }); 
      } 
      else { 
       afterLastQuestion(); 
      } 
     }); 
    } 
    function afterLastQuestion(){ 
     alert("last question complete"); 
     $start.show(); 
    } 

    var $superContainer = $("#superContainer").on('click', '.next', function() { 
     goNext($(this).closest('.slide-container')); 
     return false; 
    }); 

    var $start = $("#start").on('click', function(){ 
     $(this).hide(); 
     $superContainer.find(".slide-container") 
      .eq(0).clone(true,true) 
      .prependTo(superContainer) 
      .find(".next").trigger('click'); 
     return false; 
    }); 
}); 

DEMO

Quá trình này được bắt đầu bằng cách nhấn vào một liên kết "bắt đầu", gây ra câu hỏi đầu tiên được nhân bản theo sau là một nhấp chuột mô phỏng vào liên kết "bên cạnh" của clone. Điều này đảm bảo rằng câu hỏi đầu tiên (thực tế) được xử lý giống hệt như tất cả các câu hỏi khác.

Tôi cũng bao gồm hàm afterLastQuestion(). Sửa đổi hành động của nó để làm bất cứ điều gì là cần thiết sau khi câu hỏi cuối cùng được trả lời (hoặc lần ra).

Answer 2

Bạn có thể giữ câu hỏi hiện tại trong một biến, đặt lại câu hỏi đó trên một cú nhấp chuột next và trong bộ hẹn giờ, ví dụ:

var $current; 
superContainer.find('.next').click(function (e) { 

    e.preventDefault(); 
    $(this).parents('.slide-container').fadeOut(500, function() { 
     $(this).next().fadeIn(500); 
     $current = $(this).next(); 
    }); 

});​ 

Bạn sẽ chỉ cần đặt nó là câu hỏi đầu tiên của bạn trên khởi động, và nhớ để thiết lập lại bộ đếm thời gian của bạn trên một nhấp chuột next

Ngoài ra, nó thường là thích hợp hơn để sử dụng chứ không phải là e.preventDefault()return false.