Question

我在我的视图页面上显示了一个弹出式加载模式..它在给定时间后成功显示和隐藏。

这是我的代码：

function openSirenModal() {
    var timeout;

    $.modal({
        contentAlign: 'center',
        width: 240,
        title: 'Loading',
        content: '<div style="line-height: 25px; padding: 0 0 10px"><span id="modal-status">Contacting to the device...</span><br><span id="modal-progress">0%</span></div>',
        buttons: {},
        scrolling: false,
        actions: {
            'Cancel': {
                color: 'red',
                click: function (win) {
                    win.closeModal();
                }
            }
        },
        onOpen: function () {
            // Progress bar
            var progress = $('#modal-progress').progress(100, {
                size: 200,
                style: 'large',
                barClasses: ['anthracite-gradient', 'glossy'],
                stripes: true,
                darkStripes: false,
                showValue: false
            }),

                // Loading state
                loaded = 0,

                // Window
                win = $(this),

                // Status text
                status = $('#modal-status'),

                // Function to simulate loading
                simulateLoading = function () {


                    var siren = "siren"
                    $.ajax({
                        type: "POST",
                        data: {
                            value: siren
                        },
                        url: "http://localhost/siren/siren/",

                        success: function (data) {

                            if (data == 1) {                                    progress.hideProgressStripes().changeProgressBarColor('green-gradient');
                                status.text('success!');
                                setTimeout(function () {
                                    win.closeModal();
                                }, 1500);

                            } else {
                                progress.hideProgressStripes().changeProgressBarColor('red-gradient');
                                setTimeout(function () {
                                    win.closeModal();
                                }, 1500);

                                status.text('error!');
                            }
                        },
                        error: function () {
                            alert("error");
                            progress.hideProgressStripes().changeProgressBarColor('red-gradient');
                            setTimeout(function () {
                                win.closeModal();
                            }, 1500);
                            status.text('error!');
                        }
                    });
                };

            // Start
            timeout = setTimeout(simulateLoading, 2500);
        },
        onClose: function () {
            // Stop simulated loading if needed
            clearTimeout(timeout);
        }
    });
};

以上代码成功运作。现在我在ajax成功函数中添加了一些代码。我现在不是在编写整个代码，只是粘贴了我做过一些更改的代码：

var siren = "siren";
$.ajax({
    type: "POST",
    data: {
        value: siren
    },
    url: "http://localhost/siren/siren/",

    success: function (data) {
        alert(data);
        if (data == 1) {

            var auto_refresh = setInterval(

            function () {
                $.get('siren/sirenjson', function (datas) {

                    if (datas == 1) {

                        $('#modal-progress').hideProgressStripes().changeProgressBarColor('green-gradient');
                        $('#modal-status').text('success!');
                        setTimeout(function () {
                            clearInterval(auto_refresh);

                            * * win.closeModal(); * * //here i want to close the popup modal
                        }, 1500);    
                    }
                });
            }, 1000);    
        } else {
        }    
    },

这里我无法访问win变量，如何访问woin变量，以便关闭弹出模式？

最终代码

function openSirenModal() {
   var timeout, win;
var progress;
var status;

$.modal({
    contentAlign: 'center',
    width: 240,
    title: 'Loading',
    content: '<div style="line-height: 25px; padding: 0 0 10px"><span id="modal-status">Contacting to the device...</span><br><span id="modal-progress">0%</span></div>',
    buttons: {},
    scrolling: false,
    actions: {
        'Cancel': {
            color: 'red',
            click: function (win) {
                win.closeModal();
            }
        }
    },
    onOpen: function () {
        // Progress bar
        var progress = $('#modal-progress').progress(100, {
            size: 200,
            style: 'large',
            barClasses: ['anthracite-gradient', 'glossy'],
            stripes: true,
            darkStripes: false,
            showValue: false
        }),

            // Loading state
            loaded = 0,

            // Window
            win = $(this),

            // Status text
            status = $('#modal-status'),

            // Function to simulate loading
            simulateLoading = function () {




            };

        // Start
        //timeout = setTimeout(simulateLoading, 2500);
    },


    onClose: function () {
        // Stop simulated loading if needed
        clearTimeout(timeout);
    }


});

var siren = "siren";
$.ajax({
    type: "POST",
    data: {
        value: siren
    },
    url: "http://localhost/siren/siren/",

    success: function (data) {
        alert(data);
        if (data == 1) {

            var auto_refresh = setInterval(
                function () {

                    $.get('siren/sirenjson', function (datas) {

                        if (data == 1) {

                            $('#modal-progress').hideProgressStripes().changeProgressBarColor('green-gradient');
                            $('#modal-status').text('success!');
                           setTimeout(function (win) {
          win.closeModal();
           clearInterval(auto_refresh);
      }, 1500,win);


                        }
                    });

                }, 1000);

            //modl.onClose;
            //alert('hello');



         } else {
            progress.hideProgressStripes().changeProgressBarColor('red-gradient');
            setTimeout(function () {
                win.closeModal();
            }, 1500);


            status.text('error!');
        }

        //clearTimeout(timeout);
    },
    error: function () {

        alert("error");
        progress.hideProgressStripes().changeProgressBarColor('red-gradient');
        setTimeout(function () {
            win.closeModal();
          }, 1500);
        status.text('error!');
    }
      });

  };

Answer 1

在毫秒参数后传递参数：

setTimeout(function (win) {
    win.closeModal();
    clearInterval(auto_refresh);
}, 1500,win);

但是，请注意，此方法需要使用polyfill such as this one进行修补，以便在小于10的Internet Explorer版本上使用。

Answer 2

先关闭模态框然后清除间隔

现在你的代码清除区间首先存在

所以它停止并且下一个代码没有执行，所以在这个顺序问题

  clearInterval(auto_refresh);

                            * * win.closeModal(); * * //here i want to close the popup modal

更改

                                * * win.closeModal(); * * //here i want to close the popup modal
 clearInterval(auto_refresh);

如何在setInterval中访问变量

2 个答案: