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将“30s之后的淡出”事件排队，然后当你点击是/否时，这个淡出的新事件随后将排队等待。

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

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

jQuery全屏确认超时

1 个答案: