Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вывод переменных с интревалом (https://javascript.ru/forum/misc/51415-vyvod-peremennykh-s-intrevalom.html)

opus44 06.11.2014 12:10

Вывод переменных с интревалом
 
Задача состоит в том, что бы выводить слова из массива с интервалом по порядку.
У меня есть JSON-массив:
[{"id":"8","en_word":"Head","transcription":"hed ","ru_word":"\u0413\u043e\u043b\u043e\u0432\u0430"},{"id":"9","en_word":"Word","transcription":"w\u025c\u02d0d","ru_word":"\u0421\u043b\u043e\u0432\u043e"}]

...и скрипт который его обрабатывает и выводит слова:
var q1="<?= addslashes(json_encode($en_words)); ?>";    
var data=JSON.parse(q1);

function getWord(i){
    document.getElementById("word").innerHTML= data[i].en_word; 
    }

$(document).ready(function(){  
        for (var i=0 in data) {
            setTimeout(getWord(i), 10000); 
        }
    });

место, куда выводится слово:
<p id="word"></p>

Проблема в том, что данный скрипт отрабатывая, возвращает только последнее слово и кажется без интервала. Я мне нужно что бы слова выводились с указанным интервалом по порядку.
Очень нужна квалифицированная помощь.
П.С. Сайтец пишется на CodeIgniter,
П.П.С Я новичек)

рони 06.11.2014 12:21

opus44,
уберите for и перенесите setTimeout в getWord

opus44 06.11.2014 12:23

рони,можете показать на примере как это должно выглядеть? Спасибо.

opus44 06.11.2014 12:58

Цитата:

Сообщение от рони
уберите for

если я уберу for то как будет осуществляться перебор переменных?

рони 06.11.2014 13:11

opus44,
<p id="word"></p>
<script>
var q1='[{"id":"8","en_word":"Head","transcription":"hed ","ru_word":"\u0413\u043e\u043b\u043e\u0432\u0430"},{"id":"9","en_word":"Word","transcription":"w\u025c\u02d0d","ru_word":"\u0421\u043b\u043e\u0432\u043e"}]';
var data=JSON.parse(q1);
data = Object.keys(data).map(function (key) {
   return	data[key]["en_word"]
});

(function getWord(){
    document.getElementById("word").innerHTML = data.shift();
  data.length &&  setTimeout(getWord, 10000);
    })()
</script>

opus44 06.11.2014 14:24

рони, огромное спасибо. Все работает.

opus44 06.11.2014 14:25

Еще такой вопрос. Можно этот код заставить работать в Эксплорере?)

рони 06.11.2014 14:37

opus44,
тоды for :)
<p id="word"></p>
<script>
var q1='[{"id":"8","en_word":"Head","transcription":"hed ","ru_word":"\u0413\u043e\u043b\u043e\u0432\u0430"},{"id":"9","en_word":"Word","transcription":"w\u025c\u02d0d","ru_word":"\u0421\u043b\u043e\u0432\u043e"}]',
data=JSON.parse(q1),
keys = [];
for(var key in data) keys.push(data[key]["en_word"]);

(function getWord(){
    document.getElementById("word").innerHTML = keys.shift();
  keys.length &&  setTimeout(getWord, 10000);
    })()
</script>

opus44 06.11.2014 15:10

Код я немного подправил, т.к. в Мозилле была ошибка "TypeError: document.getElementById(...) is null"
var q1='[{"id":"8","en_word":"Head","transcription":"hed ","ru_word":"\u0413\u043e\u043b\u043e\u0432\u0430"},{"id":"9","en_word":"Word","transcription":"w\u025c\u02d0d","ru_word":"\u0421\u043b\u043e\u0432\u043e"}]',  
     data=JSON.parse(q1),
        keys = [];
    for(var key in data) keys.push(data[key]["en_word"]);

$(document).ready(function(){  
    (function getWord(){
        document.getElementById("word").innerHTML = keys.shift();
      keys.length &&  setTimeout(getWord, 1000);
        })() 
 });

, но ни в первом ни во втором случае под восьмым Эксплорером не завелось(

рони 06.11.2014 15:35

opus44, в 8 уже должно работать но можно добавить полифил.
https://developer.mozilla.org/en-US/...l_Objects/JSON
Цитата:

Сообщение от opus44
Код я немного подправил, т.к. в Мозилле была ошибка "TypeError: document.getElementById(...) is null"

хватило бы window.onload -- зачем jquery
и нужно понимание что обьекты на странице возникают не все сразу.
достаточно разместить скрипт после тега с которым он работает как в примере выше.


Часовой пояс GMT +3, время: 17:23.