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

Javascript Jquery execute code after external stylesheet changed / re-loaded the promise way

本文关键字：加载 承诺 方式 代码 执行 新加载 外部样式表 Jquery Javascript      更新时间：2023-09-26

我有一个包含几个主题的页面，允许用户通过组合框进行更改。在组合框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
});

您可以在 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);
  });
});

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

相关文章：