Question

我在webapplication中使用spin，它运行得很好，但在一种情况下，它没有。

在我进行ajax调用之前，我调用了函数showLoading（）;

function showLoading() {


    $('<div id="divSpin"></div>').appendTo(document.body);

    var target = document.getElementById("divSpin");

    var opts = {
        lines: 13, // The number of lines to draw
        length: 20, // The length of each line
        width: 10, // The line thickness
        radius: 30, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 8, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1, // Rounds per second
        trail: 60, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'mySpin', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent
        left: '50%' // Left position relative to parent
    };
    if (mySpinner) mySpinner.spin(target);
    else {
        mySpinner = new Spinner(opts).spin(target);
    }
}

在成功函数中我调用方法removeLoading：

  $.ajax({
        type: "POST",
        url: url,
        data: JSON.stringify(jsonObject),
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        async: async
    }).success(function (data, textStatus, jqXhr) {
        callback(data);
        removeLoading();
    });

在removeLoading中我只调用mySpinner.stop（）;

永远不会显示微调器。 ajax调用需要一些时间才能完成（几秒钟），如果我使用chrome进行调试并创建一个断点，我会看到创建旋转，即使我直接在removeLoading-function中设置断点，也会显示旋转。 / p> 事先提前

©A-X-I

Answer 1

我认为你可以先改进一些事情：

您的函数showLoading定义选项，即时创建元素，将其附加到正文并最终启动微调器。我会将其分为两个步骤：

1.1。创建一个函数setupLoading，用于创建元素，定义选项并设置mySpinner。此函数将在开始时调用一次。

1.2。将showLoading更改为mySpinner.spin();
您没有显示对showLoading()的调用，所以我不确定您是如何调用微调器的。但是，您可以使用事件ajaxStart和ajaxStop自动绑定（从而删除removeLoading();上的.success(..。

所以，这是你的代码改变了（这里是a working jsfiddle）：

var mySpinner = null;

function setupLoading() {    
    $('<div id="divSpin" />').appendTo(document.body);

    var target = document.getElementById("divSpin");

    var opts = {
        lines: 13, // The number of lines to draw
        length: 20, // The length of each line
        width: 10, // The line thickness
        radius: 30, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 8, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1, // Rounds per second
        trail: 60, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'mySpin', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent
        left: '50%' // Left position relative to parent
    };

    mySpinner = new Spinner(opts).spin(target);
}

function removeLoading(){
    mySpinner.stop();
}

function showLoading() {
    mySpinner.spin();
}

//Setup spinner
setupLoading();

// bind ajax to events
$(document).on('ajaxStart', showLoading);
$(document).on('ajaxStop', removeLoading);

$.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(jsonObject),
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    async: async
}).success(function (data, textStatus, jqXhr) {
    callback(data);
});

spin.js微调器没有显示

1 个答案: