Какой лучший способ загрузить много строк текста в HTML (построчно каждые 60 секунд)?

Да, вы можете использовать HID over GATT с BLE для управления Oculus. По крайней мере, в прошлый раз я пробовал игру Smash Hit со стандартной кнопкой BLE, мышь сделала ту же самую вещь, что и кнопка с кнопками.

0
задан mplungjan 19 January 2019 в 21:32
поделиться

3 ответа

Это можно сделать с помощью одного текстового элемента, который циклически изменяет свое содержимое с интервалом в 1 секунду. Обратите внимание, что я использую оператор модуля, чтобы пропустить цикл по массиву (в противном случае вы можете остаться с неопределенным, когда число превысило массив длина.

Обратите внимание, что вы можете установить это как переменную, а затем использовать clearInterval (переменная); чтобы остановить цикл.

У меня также нет анимации затухания, но шляпа должна быть легкой включить.

var content = ['This is text content 1',' This is another text  content', 'I am also a text content']; 
let contentLength = content.length;
let count=0;

function contentDisplay (){
   document.querySelector('#content').innerText = content[count % contentLength];
  count++;
}

// sets the initial display
contentDisplay();

// sets the interval to change the display
setInterval(contentDisplay, 1000);
#content {
  text-align: center;
  padding: 15px;
  font-size: 20px
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="content">text 1</p>

0
ответ дан gavgrif 19 January 2019 в 21:32
поделиться

async/await - хороший шаблон для использования.

var arr = ["foo","bar","test"];

function oneSecond() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('resolved');
        }, 1010);
    });
}
async function writeToDom(arr) {
    console.log("beginning write");
    for (var i = 0; i < arr.length; i++) {
        await oneSecond();
        console.log(arr[i]);
    }
    console.log("done.");
}
writeToDom(arr);

0
ответ дан Ron Royston 19 January 2019 в 21:32
поделиться

150 строк текста очень мало для современных браузеров, даже на небольших мобильных телефонах. Вы можете просто иметь текст в javascript и устанавливать содержимое одного div снова и снова. Это гораздо эффективнее, чем создавать много div'ов.

var lines = [
    "Text line 1",
    "Text line 2",
    "etc"
];

var div = $('div[id="content"]');
var i = 0;

(function cycle() {

  div
    .text(lines[i])
    .fadeIn(2000)
    .delay(60000) // 1000 is 1 second
    .fadeOut(2000, cycle);

  i = ++i % lines.length;

})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

0
ответ дан mplungjan 19 January 2019 в 21:32
поделиться
Другие вопросы по тегам:

Похожие вопросы: