【JS・jQuery】配列の中身を一定間隔でランダムに表示する

Maromaroのコーダーhoshidaです。

0から書くには面倒くさいけど検索しても出てこないコードを「ニッチJS」とでも名付けましょうかね。

本日のお題は「配列の中身を一定間隔でランダムに表示する」です。Webサイトなど制作していて「あ～、配列の中身を一定間隔でランダムに表示したいな～」などと言う場合にご使用ください。

$(function(){
  
  setInterval(switch_text, 1000);

  function switch_text(){
      shuffle(country);
      $('#target_txt').text(country[0]);
  }
  
  var country = [];
  country =[
    'ガーナ',
    'カーボベルデ',
    'ガイアナ',
    'カザフスタン',
    'カタール',
    'カナダ',
    'ガボン',
    'カメルーン',
    'ガンビア',
    'カンボジア'
  ];

  //シャッフル関数
  function shuffle(array) {
    var m = array.length, t, i;
    while (m) {
      i = Math.floor(Math.random() * m--);
      t = array[m];
      array[m] = array[i];
      array[i] = t;
    }
  }

});

以下解説です。

  setInterval(switch_text, 1000);

この部分でsetInterval関数を使用し、下部で設定している「switch_text」関数を1秒ごとに実行しています。

  function switch_text(){
    shuffle(country);
    $('#target_txt').text(country[0]);
  }

キモの部分です。国名が格納されている配列の中身をシャッフルし、その後一番目の値を出力しています。「target_txt」というidの要素の中身を書き換えています。

  var country = [];
  country =[
    'ガーナ',
    'カーボベルデ',
    'ガイアナ',
    'カザフスタン',
    'カタール',
    'カナダ',
    'ガボン',
    'カメルーン',
    'ガンビア',
    'カンボジア'
  ];

配列の用意です。「カ」から始まる国名にしてみました。

   //シャッフル関数
  function shuffle(array) {
    var m = array.length, t, i;
    while (m) {
      i = Math.floor(Math.random() * m--);
      t = array[m];
      array[m] = array[i];
      array[i] = t;
    }
  }

配列をランダムにシャッフルするための関数です。この記述だとランダムが均等になるので愛用していますが、シャッフルできればなんでも良いです。

以上です。配列の中身を一定間隔でランダムに表示したい人のお役に立てれば幸いです。