jQueryの繰り返し記述について

前提・実現したいこと

jQueryについて質問です。

1秒ごとにwidthが増えていく、という記述なのですが、
var img = $('img');でhtmlの中にあるimgの個数を取得して、
それをもとに100％になるという計算しています。
現在はimgが4つなので、4回に分けて25%ずつ増えていきます。

実現したいことは
var img = $('img');の部分をimgの個数ではなく、var img = $(数字);のように任意の数字を入力して
その数字の回数分でwidthを増やしていくように変更したいです。
どう記述すればよろしいでしょうか？どうぞよろしくお願いいたします。

また上記と重複してしまうかもしれませんが、数字を回数として認識させるにはどうすればよいですか？
よろしくお願いいたします。

発生している問題・エラーメッセージ

該当のソースコード

$(function () {

    var img =  $('img');
    var slidebar = $('.slidebar_inner');
     
    var imgth = img.length;//imgの数（現在4つ）
    var bargth = 100 / imgth;
    
    var barWidth = 0;
    img.each(function(i){//imgの数だけ回す
      setTimeout(function(){
      $(this).ready(function () { 
          barWidth = barWidth + bargth;  
          slidebar.css('width',barWidth + '%');
      });
    },1000*i);       
    });
});

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

int32_t

2021/02/08 13:03

欲しい動作が理解できません。たとえば「任意の数」が 10 で img が4つだったら width はどうなって欲しいのでしょうか? 「任意の数」が 4 で img が 10 の場合は?

SOUSEI_S

2021/02/08 13:21 編集

分かりにくい説明で申し訳ございません。 imgの数に左右されることなく、任意の数字が10なら10％ずつ増え、10秒かけてwidthが100%になってほしいです。現状はimgの数が増えれば増えた数だけ、width100%になる秒数も増えてしまいます。そこを任意の固定値にしたいと考えています。

int32_t

2021/02/08 13:28

なるほど、理解しました。「10秒」の開始はどのタイミングでしょうか? このコードが実行されるタイミング(すべてのimgが同期して太る)か、それぞれのimgのロード完了のタイミングからそれぞれ10秒かけるか。

int32_t

2021/02/08 13:32

幅の変更は必ず1秒に1回にしなければならないでしょうか?1秒に60回やっては要件を満たしませんか?

SOUSEI_S

2021/02/08 13:50

サイト表示時のロード画面の、ローディングバーになりますので、ページにアクセスしたタイミングで開始してほしいと考えています。幅の変更に関しては、伸びて止まるを繰り返して100％になるイメージです。 1秒毎に1回分のびて、伸びるスピードはcssのtransitionで0.3秒ぐらいに設定し、0.7秒は一度止まっているようにしたいと思っています。よろしくお願いいたします。

int32_t

2021/02/08 14:04

あ、やっと理解できた気がします。imgの幅が変わるのではなくてローディングバーの幅が変わるのですね。欲しい動作は、imgの数やロード状態とはまったく無関係ということでいいのでしょうか。

SOUSEI_S

2021/02/08 14:38 編集

imgの数とはまったく関係ないですね。ロード状態も基本的には気にしていないです。 htmlの中でimgの数がちょうどいい数字だったということで、imgの個数にしているだけだと思います。ですのでロード時間は増やしたくないのに、ソース内のimgタグが増えたらロード時間も増えてしまうということに。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1(function() {
2  const MAX_SECONDS = 10;  // これが「任意の数字」。10秒で100%幅になる。
3  let elapsedSeconds = 0;
4  const slidebar = document.querySelector('.slidebar_inner');
5  slidebar.style.width = '0%';  // 念の為初期化
6  const timerID = setInterval(() => {
7    ++elapsedSeconds;
8    slidebar.style.width = `${elapsedSeconds * 100 / MAX_SECONDS}%`;
9    if (elapsedSeconds >= MAX_SECONDS)
10      clearInterval(timerID);
11  }, 1000);
12})();