spin.js spinner не отображается

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 требуется некоторое время для завершения (несколько секунд), и если я отлаживаю хром и делаю точку останова, я вижу, что спин создан, даже если я установил точку останова непосредственно в моей функции removeLoading, будет показан оборот.

ТНХ заранее

© Акси

Answer 1

Я думаю, вы можете улучшить несколько вещей первой:

1. Ваша функция showLoading определяет параметры, создает элемент на лету, присоединяет его к телу и, в конце концов, запускает прядильщик. Я бы разделил это на два этапа:

   1.1. Создайте функцию setupLoading, которая создает элемент, определяет параметры и устанавливает mySpinner. Эта функция будет вызываться только один раз, в начале.

   1.2. Изменение showLoading только mySpinner.spin();

2. Вы не показываете звонок 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); 
});