Как выполнить макрос через n секунд после загрузки страницы?

Question

Всем привет. Есть вот такой скрипт:

var textNodes = [];
var textNodes_data = [];
var i=0;
function search_textNodes(b) {
   b = b.childNodes;
   for (var c = 0, d = b.length; c < d; c++) {
       var a = b[c];
       if (a.nodeType == 3) {
           textNodes.push(a);
           textNodes_data.push(a.data);
           a.data = ""
       } else a.hasChildNodes() && search_textNodes(a)
   }
};

var d = document.getElementById('test');
search_textNodes(d);
function str_write() {
   var a = textNodes_data[i];
   if (a) {
       textNodes[i].data += a.charAt(0);
       textNodes_data[i] = a.substr(1)
   } else i++;
   i < textNodes.length && setTimeout(arguments.callee, 60)
};
str_write()

Помогите пожалуйста сделать так, чтобы макрос выполнился через 2 секунды после загрузки страницы. Всем спасибо.

Answer 1

Как выполнить макрос через n секунд после загрузки страницы?

Например вот так...

<script>
const n = 2
document.addEventListener('DOMContentLoaded', _ => {
   setTimeout(_ => {
      // тут помести свой скрипт
      console.log('Скрипт выполняется...')
   }, n * 1000)
})
</script>

Answer 2

Сделал так, но не уверен, что это правильно. Жду лучшие варианты.

setTimeout(function() {
   document.getElementById('hideBlock').style.display = 'block';
}, 3000);


// Для печати текста

document.addEventListener('DOMContentLoaded', _ => {
   setTimeout(_ => {

var textNodes = [];
var textNodes_data = [];
var i=0;
function search_textNodes(b) {
    b = b.childNodes;
    for (var c = 0, d = b.length; c < d; c++) {
        var a = b[c];
        if (a.nodeType == 3) {
            textNodes.push(a);
            textNodes_data.push(a.data);
            a.data = ""
        } else a.hasChildNodes() && search_textNodes(a)
    }
};

var d = document.getElementById('hideBlock');
search_textNodes(d);
function str_write() {
    var a = textNodes_data[i];
    if (a) {
        textNodes[i].data += a.charAt(0);
        textNodes_data[i] = a.substr(1)
    } else i++;
    i < textNodes.length && setTimeout(arguments.callee, 60)
};
str_write()

 }, 3000)
})

.test { 
 display: none;
width: 32vw;
height: 25vw;
position: absolute; 
top: 0;
left: 1em;
top: 0em;
right: 0;
margin: auto;
transition: 3s;

text-align: left;
  color: white;
  font:  500 30px/1.5 'Syncopate', sans-serif;
  font-style: italic;

  text-shadow: 
    0 1px 0 #ccc, 
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px   rgba(0,0,0, 0.10),
        0 0px 5px   rgba(0,0,0, 0.10),
        0 1px 3px   rgba(0,0,0, 0.30),
        0 3px 5px   rgba(0,0,0, 0.20),
        0 5px 10px  rgba(0,0,0, 0.25),
        0 10px 10px rgba(0,0,0, 0.20),
        0 20px 20px rgba(0,0,0, 0.15);
 
 font-size: 1.5vw; 
}

<div class="test" id='hideBlock'>
Белеет парус одинокий<br>
В тумане моря голубом!..<br>
Что ищет он в стране далекой?<br>
Что кинул он в краю родном?...<br><br>
Играют волны — ветер свищет,<br>
И мачта гнется и скрипит...<br>
Увы! Он счастия не ищет<br>
И не от счастия бежит!<br><br>
Под ним струя светлей лазури,<br>
Над ним луч солнца золотой...<br>
А он, мятежный, просит бури,<br>
Как будто в бурях есть покой!<br>
</div>

Answer 3

Вот такой вариант будет более приемлемым, задержка 5 сек.

function pechat() {
  var textNodes =[];
  var textNodes_data =[];
  var i = 0;
  function search_textNodes(b) {
    b = b.childNodes;
    for (var c = 0, d = b.length; c < d; c++) {
      var a = b[c];
      if (a.nodeType == 3) {
        textNodes.push(a);
        textNodes_data.push(a.data);
        a.data = ""
      } else a.hasChildNodes() && search_textNodes(a)
    }
  };
  var d = document.getElementById('test');
  search_textNodes(d);
  function str_write() {
    var a = textNodes_data[i];
    if (a) {
      textNodes[i].data += a.charAt(0);
      textNodes_data[i] = a.substr(1)
    } else i++;
    i < textNodes.length && setTimeout(str_write, 60)
  };
  d.classList.add('show');
  str_write()
}
setTimeout(pechat, 5000);

#test {
    width: 30vw;
    height: 23vw;
    position: relative;
    left: -18em;
    bottom: -3em;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 20px;
    font-family: garamond serif;
    font-weight: bold;
    font-style: italic;
    color: red;
    font: 600 30px/1.3 'Syncopate', sans-serif;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px   rgba(0,0,0, .10),
    0 0 5px   rgba(0,0,0, .10),
    0 1px 3px   rgba(0,0,0, .30),
    0 3px 5px   rgba(0,0,0, .20),
    0 5px 10px  rgba(0,0,0, .25),
    0 10px 10px rgba(0,0,0, .20),
    0 20px 20px rgba(0,0,0, .15);
    text-transform: uppercase;
    font-size: 1.2vw;
    opacity: 0;
}
#test.show {
    opacity: 1;
}

<div id="test">
Белеет парус одинокий<br>
В тумане моря голубом!..<br>
Что ищет он в стране далекой?<br>
Что кинул он в краю родном?...<br><br>
Играют волны — ветер свищет,<br>
И мачта гнется и скрипит...<br>
Увы! Он счастия не ищет<br>
И не от счастия бежит!
</div>

БЛОГ НА HUSL

Как выполнить макрос через n секунд после загрузки страницы?

Ответы (3 шт):