省略号单词加载屏幕

ellipses word loading screen

本文关键字：屏幕 加载 单词 省略号      更新时间：2023-09-26

我想做的是制作一个加载屏幕，显示一些消息和闪烁的省略号。它看起来像这样，但更生动：

Crunching data.
Crunching data..
Crunching data...
Crunching data.
Crunching data..

目前，我有以下代码，但它会崩溃网站，所以我认为它不起作用是公平的：

function loader(div) {
  div.append('<div id="loader"></div>');
  load = div.find('#loader');
  load.html('Crunching Some Data.');
  numberOfPeriods = 1;
  while($('#loader').length > 0) {
    setTimeout(function() {
      if(numberOfPeriods < 4) {
        numberOfPeriods++;
        for(var i=0; i<numberOfPeriods; i++) {
          load.append('.');
        }
      } else {
        load.html('Crunching Some Data.');
        numberOfPeriods = 1;
      }
    }, 200);
  }
}

一个人会怎么做呢？

试试这样的

function showLoader() {
    var load;
    load = $('<div id="loader"></div>');
    $(document.body).append(load);
    load.html('Crunching Some Data.');
    numberOfPeriods = 1;
    interval = setInterval(function(){
        if(numberOfPeriods < 4)
        {
            load.html(load.html() + '.');
            numberOfPeriods++;
        }
        else
        {
            load.html('Crunching Some Data.');
            numberOfPeriods = 1;
        }
    }, 200);
}
function hideLoader(){
    clearInterval(interval);
    $('#loader').remove();
}
不要将setTimeout放入循环中。相反，在setTimeout调用的函数顶部测试"完成"条件（测试#loader的长度）。如果未完成，请再次使用setTimeout。如果完成，调用一个函数来移动事物。
相关文章：