我是编码新手。我们可以用更简单的方式编写此setTimeOut代码并调用它吗?

时间:2019-07-06 19:26:28

标签: javascript

我正在学习做一个预加载器。如您在下面提供的链接中所见,它正在工作,但我对此不满意。这里的工作代码。https://codepen.io/anon/pen/VJGJYx 还有其他方法可以做到吗?

    $(window).on('load', function() {
      setTimeout(function () {
        $('.si-preloader--logo').addClass('si-preloader-logo--opaque');
      }, 100);

      setTimeout(function () {
        $('.si-preloader-line--one').addClass('si-preloader-line-half--height');
      }, 800);

      setTimeout(function () {
        $('.si-preloader--logo').removeClass('si-preloader-logo--opaque').delay(100).queue(function(next){
          $(this).addClass('si-preloader-logo--opaque');
          next();
        });
        $('.si-preloader-line--two').addClass('si-preloader-line-half--height');
      }, 1100);

      setTimeout(function () {
        $('.si-preloader-logo--wrap').addClass('si-preloader-logo-wrap--offScreen');
        $('.si-preloader-line--one').removeClass('si-preloader-line-half--height').addClass('si-preloader-line-full--height');
        $('.si-preloader-line--two').removeClass('si-preloader-line-half--height').addClass('si-preloader-line-full--height');
      }, 1600);

      setTimeout(function () {
        $('.si-preloader--left , .si-preloader--right').addClass('si-preloader-dual-zero--width');
      }, 2500);

      setTimeout(function () {
        $('.si--preloader').remove();
      }, 3300);
    });

1 个答案:

答案 0 :(得分:0)

也许稍微清洁一点;)

let animation = {
  prefixClass: 'si-preloader',
  className(name) {
    return `${this.prefixClass}${name}`;
  },
  delayedIntroduce(time) {
    setTimeout(() => {
      switch (time) {
        case 100:
          $(`.${this.className('--logo')}`)
            .addClass(this.className('-logo--opaque'));
          break;
        case 600:
          $(`.${this.className('-line--one')}`)
            .addClass(this.className('-line-half--height'));
          break;
        case 1200:
          $(`.${this.className('--logo')}`)
            .removeClass(this.className('-logo--opaque'))
            .animate({ opacity: 1 }, 100);
          break;
        case 1300:
          $(`.${this.className('-logo--wrap')}`)
            .addClass(this.className('-logo-wrap--offScreen'))
            .animate({ opacity: 0 }, 300);
          
          $(`.${this.className('-line--one')}`)
            .removeClass(this.className('-line-half--height'))
            .addClass(this.className('-line-full--height'))
            .animate({ opacity: 0 }, 1000);
          break;
        case 1400:
          $(`.${this.className('-line--two')}`)
            .addClass(this.className('-line-full--height'))
            .animate({ opacity: 0 }, 1000);
          break;
        case 2200:
          $(`.${this.className('--left')}, .${this.className('--right')}`)
            .addClass(this.className('-dual-zero--width'));
          break;
        case 3000:
          $('.si--preloader').remove();
        default:
          break;
      }
    }, time);
  }
};

const times = [100, 600, 1200, 1300, 1400, 2200, 3000];

times.forEach(time => {
  animation.delayedIntroduce(time);
});
/* Global */
*,
::before,
::after {
  box-sizing: border-box; }

* {
  margin: 0;
  padding: 0; }

body {
  color: #1b1b1b;
  font-family: "Circular", sans-serif, Arial;
  font-size: 16px;
  letter-spacing: -0.0125px; }

/* Preloader */
.si--preloader {
  left: 0;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100; }
  .si--preloader .si-preloader--left {
    background-color: #1b1b1b;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%; }
    .si--preloader .si-preloader--left.si-preloader-dual-zero--width {
      width: 0;
      transition: 500ms width ease-in; }
  .si--preloader .si-preloader--right {
    background-color: #1b1b1b;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%; }
    .si--preloader .si-preloader--right.si-preloader-dual-zero--width {
      width: 0;
      transition: 500ms width ease-in; }
  .si--preloader .si-preloader-logo--wrap {
    background-color: #1b1b1b;
    position: absolute;
    left: 50%;
    opacity: 1;
    padding: 25px;
    top: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    .si--preloader .si-preloader-logo--wrap.si-preloader-logo-wrap--offScreen {
      transition: 500ms top ease-in;
      top: -50%; }
    .si--preloader .si-preloader-logo--wrap .si-preloader--logo {
      opacity: 0; }
      .si--preloader .si-preloader-logo--wrap .si-preloader--logo.si-preloader-logo--opaque {
        transition: 300ms opacity ease-in;
        opacity: 1; }
    .si--preloader .si-preloader-logo--wrap .si-preloader-logo--svg {
      height: 25px;
      width: 168px;
      fill: #fff; }
  .si--preloader .si-preloader-line--wrap {
    will-change: transorm; }
    .si--preloader .si-preloader-line--wrap .si-preloader-line--one {
      background-color: #888;
      bottom: 0;
      height: 0;
      position: absolute;
      left: 50%;
      width: 1px; }
      .si--preloader .si-preloader-line--wrap .si-preloader-line--one.si-preloader-line-half--height {
        height: 50%;
        transition: 500ms height ease-in; }
      .si--preloader .si-preloader-line--wrap .si-preloader-line--one.si-preloader-line-full--height {
        height: 100%;
        transition: 500ms height ease-in; }
    .si--preloader .si-preloader-line--wrap .si-preloader-line--two {
      background-color: #fff;
      bottom: 0;
      height: 0;
      position: absolute;
      left: 50%;
      width: 1px; }
      .si--preloader .si-preloader-line--wrap .si-preloader-line--two.si-preloader-line-full--height {
        height: 100%;
        transition: 500ms height ease-in; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="si--preloader">
    <div class="si-preloader--left"></div>
    <div class="si-preloader--right"></div>
    <div class="si-preloader-logo--wrap">
      <div class="si-preloader--logo">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1230.43 309.59" id="svg-replaced-0"
          class="si-preloader-logo--svg">
          <path
            d="M619.18 225.21a57.16 57.16 0 0 1-12.12 18.38 51.69 51.69 0 0 1-17.34 11.49A54.56 54.56 0 0 1 569 259a52.23 52.23 0 0 1-20.68-4.18A54.37 54.37 0 0 1 531 243.17a57.06 57.06 0 0 1-12.12-18.38 66.18 66.18 0 0 1 0-48.46A57.08 57.08 0 0 1 531 157.95a54.41 54.41 0 0 1 17.34-11.7 52.33 52.33 0 0 1 20.66-4.18 54.72 54.72 0 0 1 20.68 4 51.77 51.77 0 0 1 17.34 11.49 57.19 57.19 0 0 1 12.12 18.38 62.81 62.81 0 0 1 4.6 24.65 62.78 62.78 0 0 1-4.56 24.62zM790.67 60a35.55 35.55 0 0 0 49.92 0A33.51 33.51 0 0 0 851 35.09a33.52 33.52 0 0 0-10.44-24.86 35.47 35.47 0 0 0-49.92 0 35.41 35.41 0 0 0-7.52 11.07 34.21 34.21 0 0 0-2.72 13.79 34.2 34.2 0 0 0 2.72 13.78A35.36 35.36 0 0 0 790.67 60zm-367 86.36a42.84 42.84 0 0 0-13.41-7.86 48.21 48.21 0 0 0-17.62-2.86q-9.74.11-21.24 5.08a50.12 50.12 0 0 0-24.41 21.46q-8.3 14.51-6.16 33.15L431.68 156a35.51 35.51 0 0 0-8.06-9.69zm800.13 9.52a97.14 97.14 0 0 0-19.63-34A89.54 89.54 0 0 0 1172 99.22q-19.22-8.14-43.86-8.14-23.4 0-42.82 8.77a107.37 107.37 0 0 0-31 21.14l10-23.22h-61.83L951 228.09h-2.92l-51-130.34H788.37V247l-6.49 4.94a30.39 30.39 0 0 1-19.22 5.43q-10.87 0-16.71-6.88a22 22 0 0 1-5.64-10.55 59.11 59.11 0 0 1-1.46-13.57v-81.83H773V97.76h-34.14V35.09h-54.73v62.67H684v46.79h.13v91.68q0 35.39 19.63 54.58a59.14 59.14 0 0 0 20.68 13.43 74.7 74.7 0 0 0 27.78 4.9 120.88 120.88 0 0 0 24.44-2.3 92.31 92.31 0 0 0 14.45-4.38h52V117l79.11 185.47h53.89l45.63-106c0 1.21-.16 2.39-.16 3.61q0 23.81 8.15 43.66a103.17 103.17 0 0 0 57.21 57.26 112.71 112.71 0 0 0 43.24 8.15q34.67 0 58.69-15.46a114.67 114.67 0 0 0 38.22-40.52l-45.53-22.56a62.49 62.49 0 0 1-19.42 21.51q-12.33 8.57-31.13 8.57a65.92 65.92 0 0 1-18.8-2.71 50.25 50.25 0 0 1-16.92-8.77 52.14 52.14 0 0 1-13-15 57.39 57.39 0 0 1-6.89-21.51h154.2a23.19 23.19 0 0 1 .4-4.7 28 28 0 0 1 .42-4.6v-5a131.53 131.53 0 0 0-6.67-42.58zm-145.38 18q5.42-18 18.8-28a50.13 50.13 0 0 1 30.91-10q12.53 0 21.51 3.76a48.22 48.22 0 0 1 15 9.61 42.84 42.84 0 0 1 9.19 12.53 35.47 35.47 0 0 1 3.55 12.11zm-774-30.85c1.55-2.63 3.24-5.18 5-7.69.55-.79 1.06-1.61 1.63-2.39.26-.35.57-.68.84-1 2-2.6 4-5.17 6.22-7.63a100.36 100.36 0 0 1 28.67-21.52l.07-.17-5.14-3.09a47.36 47.36 0 0 0-13.16-6 65.2 65.2 0 0 0-18.59-2.32 58.3 58.3 0 0 0-17.76 2.86 78.71 78.71 0 0 0-16.71 7.52 73 73 0 0 0-14 10.92 52.91 52.91 0 0 0-10 13.79h-3.34V97.76H196.7v38.39a97.81 97.81 0 0 0-28.35-28.78q-24.23-16.29-59.74-16.29Q84.8 91.07 65 99.22a101.23 101.23 0 0 0-56.81 57A115.45 115.45 0 0 0 0 200.11q0 23.81 8.15 43.66a105.63 105.63 0 0 0 22.55 34.45A101.61 101.61 0 0 0 65 301q19.84 8.15 43.66 8.15 35.92 0 59.95-16.51A114.15 114.15 0 0 0 196.7 265v37.41h54.73V201.66a73.61 73.61 0 0 1 3.55-23.3 58.42 58.42 0 0 1 10-18.69 45 45 0 0 1 15.67-12.39 46.73 46.73 0 0 1 20.47-4.41c1.13 0 2.17.04 3.22.07zM196.7 246.23l-40.88-17.72q-7.11 14.63-19 22.35t-29 7.73a50.76 50.76 0 0 1-20.47-4.17 52.61 52.61 0 0 1-16.92-11.7 53.46 53.46 0 0 1-11.53-18.38 72.34 72.34 0 0 1 0-48.46 53.47 53.47 0 0 1 11.49-18.38 52.62 52.62 0 0 1 16.92-11.7 50.87 50.87 0 0 1 20.47-4.18q16.7 0 27.78 7.31t18.17 21.51l43-17.9zm156.8-14.13a57.37 57.37 0 0 0 14.86 17 52.13 52.13 0 0 0 17.85 8.67 50.23 50.23 0 0 0 19 1.35 65.93 65.93 0 0 0 18.33-5q17.26-7.45 25.18-20.2a62.51 62.51 0 0 0 9.28-27.4l50.75 2.66a114.67 114.67 0 0 1-19 52.35 88.6 88.6 0 0 1-7.4 9.44 100.25 100.25 0 0 0 38 30.48 88.58 88.58 0 0 0 37.39 8.15q23.39 0 39.27-9.19t23.39-22.14h3.34l-3.34 22.53v2.09h54.73V98.21h-51.35v24.65h-3.34q-7.52-12.94-23.39-22.14t-39.27-9.19a88.64 88.64 0 0 0-37.39 8.14 99.09 99.09 0 0 0-42 36.19 140.57 140.57 0 0 1 11.76 21.75l2 4.6a28.08 28.08 0 0 0 1.44 4.38A23.16 23.16 0 0 0 495 171z"
            fill="#fff" data-name="Layer 1"></path>
        </svg>
      </div>
    </div>
    <div class="si-preloader-line--wrap">
      <div class="si-preloader-line--one"></div>
      <div class="si-preloader-line--two"></div>
    </div>
  </div>