jQuery全屏确认超时

Question

我有一个基于网络的生产跟踪系统。我的用户没有阅读屏幕，所以我构建了一个全屏警报并确认功能来制作它们。警告是在屏幕上停留 15 秒以减慢用户的速度并从错误中吸取教训。确认是先显示问题 15 秒，然后才能给出答案，如果没有选择任何选项，我希望确认在 30 秒后淡出。以下是我目前所拥有的。

我无法上班的是选择其中一个选项以返回true或false时。如果我只是调用该函数，这也有效，但是当我将它分配给一个变量时，只需跳过并执行其余代码。我希望它起到确认的作用。感谢您的帮助。

function fullScreenAlertConfirm(msg,confirmOpt){

    var returnVar;

    $('body').append("<div class='alert'></div>");

    if(confirmOpt != null || confirmOpt != false){

        $('div.alert').html(msg+"<br> This Message will disappear after 30 seconds <br> Selection options will appear in 15 sec");

        $('div.alert').append("<div class='confirmBox'></div>");
        $("div.confirmBox").hide();
        $('div.confirmBox').append("<div class='no'>NO</div> <div class='yes'>YES</div> ")
        $("div.confirmBox").delay(15000).fadeIn(400);

        $("div.no").click(function(){

            $('div.alert').fadeOut(400);

            return false;

        });

        $("div.yes").click(function(){

            $('div.alert').fadeOut(400);

            return true;

        });

        $('div.alert').delay(30000).fadeOut(400);

    }else{

        $('div.alert').text(msg+"<br> This Message will disappear after 15 seconds");
        $('div.alert').delay(15000).fadeOut(400);
         return true;
    }
}

fullScreenAlertConfirm("Are you sure you want to change to the next shift?",true);

http://jsfiddle.net/tQkKh/1/

我需要此功能工作的一种方式。

//Change Shift
$("#change-shift").click(function () {

    var confirmShift = fullScreenAlertConfirm("Are you sure you want to change to the next shift?",true);
// var confirmShift  = confirm("Are you sure you want to change to the next shift?");

    if(confirmShift == false){
        window.location = 'orderControl.php';
        return;
    }

    $("#loading").fadeIn("fast");

    var request = $.ajax({
        url:'process.php',
        type:'POST',
        async:false,
        data:{mode:'change_shift'}
    });

    request.done(function (data) {

        var objData = jQuery.parseJSON(data);

        if(objData.results == false){
            $("#loading").fadeOut("fast");
            $('body').append("<div class='error'>" +objData.errorMsg+"<br> This Message will disappear after 15 seconds</div>");
            $('div.error').delay(15000).fadeOut(400);

        } else if(objData.results == true){
            window.location = 'orderControl.php';
        }
    });

    request.fail(function (xhr) {
        alert('AJAX Error: ' + xhr.statusText);
    });

});

一个 jsFiddle 示例：我想如何使用它。 http://jsfiddle.net/tQkKh/3/

Answer 1

问题之所以发生，是因为 jquery 将“30 秒后淡出”事件排队，然后当您单击是/否时，这个新的淡出事件随后会排队发生。

要清除此队列，请在您的淡出之前附加 .stop(true, true)，例如：

$('div.alert').stop(true, true).fadeOut(400);