javascript - spin.js 微调器未显示

Question

我在网络应用程序中使用 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 函数中设置断点，也会显示自旋。

提前致谢

©a-x-i

Answer 1

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

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

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

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

2. 您没有显示对 showLoading() 的调用，因此我不确定您如何调用微调器。但是，您可以使用事件 ajaxStart 和 ajaxStop 来自动绑定(bind)(从而删除 .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);
});