Bootstrap 4 更改样式表链接的href时如何防止闪烁？

该场景是一个主题切换器。在我的例子中，它是用于使用引导样例主题的引导

  <script src="/jquery/dist/jquery.min.js"></script>
  <script src="/bootstrap/dist/js/bootstrap.js"></script>
  <link rel="stylesheet" href="/css/styles.css">
  <link id="theme-styles" href="/bootswatch/dist/darkly/bootstrap.min.css" rel="stylesheet">

---

主题选择器是一个包含主题列表的选择元素（下拉列表）。在列表中向上和向下移动箭头时，页面会闪烁。在新的href生效之前，您可以看到应用的默认样式（或缺少默认样式）。

我很惊讶我找不到这个问题的答案。当然，没什么大不了的。但是闪烁让我烦恼，我知道它会更平滑。使用CDN的问题可能会更糟，所以我决定自己解决它。其实很简单。下面是我的实际代码和注释：

  const handleThemeSelectorChange = (s,e) => {
    const themeName = themeSelector.value;
    const href = `/bootswatch/dist/${themeName}/bootstrap.min.css`;

    // Changing the href of a stylesheet link immediately takes that stylesheet out 
    // of the set of styles and the default styles will be applied in the interval 
    // between the new href and the old href. The effect is a noticeable flicker as 
    // elements change size, shape, and color. We can work around this by creating a
    // new stylesheet with the new href and sliding it below the original 
    // stylesheet. We then give it a just a few milliseconds to apply the new styles
    // before removing the original stylesheet. If we change the theme rapid fire, 
    // we could wind up with several old stylesheets for just a beat. But we're 
    // using jQuery to remove them all, leaving only the new one. The effect is a 
    // much smoother transition between themes.
    const ts = $('#theme-styles');
    const ss = ts.clone();
    ts.attr('id', 'old-theme');
    ss.attr('href', href);
    ts.after(ss);
    setTimeout(() => {
      $('#old-theme').remove()
      }, 300)
    window.localStorage.setItem('theme', themeName);
  }

  const handleThemeSelectorChange = (s,e) => {
    const themeName = themeSelector.value;
    const href = `/bootswatch/dist/${themeName}/bootstrap.min.css`;

    // Changing the href of a stylesheet link immediately takes that stylesheet out 
    // of the set of styles and the default styles will be applied in the interval 
    // between the new href and the old href. The effect is a noticeable flicker as 
    // elements change size, shape, and color. We can work around this by creating a
    // new stylesheet with the new href and sliding it below the original 
    // stylesheet. We then give it a just a few milliseconds to apply the new styles
    // before removing the original stylesheet. If we change the theme rapid fire, 
    // we could wind up with several old stylesheets for just a beat. But we're 
    // using jQuery to remove them all, leaving only the new one. The effect is a 
    // much smoother transition between themes.
    const ts = $('#theme-styles');
    const ss = ts.clone();
    ts.attr('id', 'old-theme');
    ss.attr('href', href);
    ts.after(ss);
    setTimeout(() => {
      $('#old-theme').remove()
      }, 300)
    window.localStorage.setItem('theme', themeName);
  }