spin.js 微调器未显示

Question

我在 web 应用程序中使用 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 中设置断点也会显示旋转。

提前谢谢

©a-x-i

Answer 1

我认为你可以先改进几件事：

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

   1.1。创建一个函数setupLoading，它创建元素、定义选项并设置mySpinner。这个函数在开始时只会被调用一次。

   1.2。将 showLoading 更改为 mySpinner.spin();

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

所以，这是您的代码进行了这些更改（这里是 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);
});