Question

我有一个包含几个主题的页面，允许用户通过组合框进行更改。在change组合框的事件中，我使用jquery删除当前样式表并添加新样式表。现在我想在新样式表完成加载后运行一些代码（重新计算元素的大小，......）。

我想知道我能否以承诺的方式做到这一点？目前我正在使用setTimeout，但我眼中的时机不够好。我想的是：

var oldStylesheet = ...;
var newStylesheet = ...;

$.when(function() {
    var d = $.Deferred;

    oldStylesheet.remove();
    newStylesheet.append();

    // when new stylesheet completed loading: d.resolve();

    return d.promise;
}).done(function() {
    // code to run after new stylesheet has completed loading
});

Answer 1

您可以在jQuery中使用$.get() AJAX函数作为用例，假设您的组合框中的选项值是样式表的url：

var oldStylesheet = ...;
$('.theme-select').on('change', function(){
  var stylesheet = $(this).val();
  $.get(stylesheet , function(response){
   oldStylesheet.remove();
   // Check if the style tag in which the file will be appended is in place
   // if not create one
   if (!$('.custom-theme').length){
       $('head').append('<style class="custom-theme"></style>');
   }
   // Add/Replace the new style with the old one.
   $('.custom-theme').text(response);
  });
});

我没有测试过，所以我不知道是否有错误或什么不是。

Javascript Jquery在外部样式表更改/重新加载promise方式后执行代码

1 个答案: