Boards

JavaScriptの質問をしたり答えたりする掲示板

だら@Crieit開発者

2019-01-29に作成

JavaScriptに関する質問を何でもしていい掲示板です。匿名での投稿も可能です。どんなことでもどしどし書き込んでください。回答もどなたでも自由にできます。僕も回答できる内容であれば必ず回答します！

質問は下記に沿って書いていただくと回答しやすくなります。

実際のソースコードがある場合、可能な範囲で書いていただくと問題点を見つけやすくなります。
実際に発生したエラーメッセージがある場合、コピペしていただくと問題解決につながる可能性が高いです。
見た目上の問題の場合、スクリーンショットを貼ると状況が把握しやすくなります。

ボードとは？

2020-05

たしぎ@プログラミング

2020-05-23に投稿

はじめまして、たしぎと申します。
どうしてもわからない所があり質問させて頂きました。
よろしくお願い致します。

今回の質問はエラーの解決ではなく、if文の中に真偽値があるケースの
コードの動きについての質問になります。
コードはこちらの「スクロールによって見え隠れするヘッダー」を参考にした
素のJavaScriptでのスクロールヘッダーの実装になります。

質問内容

24行目、コメント②番のticking = falseが必要な理由がわかりません。

試したこと

まず6行目のコメント①番のfalseをtureに変えてみましたが、機能しません。
これはわかります。
次に24行目のコメント②のticking=falseを削除してみると、機能しません。
これがわかりません。
なぜこれが無いと機能しないのか、なぜこの位置で機能するのかがわかりません。
6行目コメント①のticking=falseだけで機能するような気がしてしまうのです。
このif文の条件式 ( !ticking ) はどのような参照をしているのかが知りたいです。
スコープやif文のドキュメントや記事などを、いくら調べても出てきませんでした。

html

<header id="header">ヘッダー</header>

JavaScript

(function () {
  const target = document.getElementById("header"),
    height = 56;
  let offset = 0,
    lastPosition = 0,
    ticking = false; // ①

  function onScroll() {
    if (lastPosition > height) {
      if (lastPosition > offset) {
        target.classList.add("head-animation");
      } else {
        target.classList.remove("head-animation");
      }
      offset = lastPosition;
    }
  }

  window.addEventListener("scroll", function (e) {
    lastPosition = window.scrollY;
    if (!ticking) {
      window.requestAnimationFrame(function () {
        onScroll(lastPosition);
        ticking = false; // ② これがわかりません
      });
      ticking = true; // ③
    }
  });
})();

以上の疑問についてお教え頂けますでしょうか。
もしくは参考になる記事等がありましたらお教えください。
よろしくお願い致します。

(匿名) #1cf374b2

2020-05-04に更新

JavaScript

独学で躓いてしまった為、
初めてこちらの掲示板を利用させて頂きます。
何卒お願いいたします。
使用エディタはVisualStudioCodeです。

【質問内容】

JavaScript関連動画やWEBページを見ながら練習している初心者です。
絵のような画像を順番にフェードインして並べるプログラムを
実装してみたいのですが、複数表示しようとすると上手くいきません。
参考のWEBページ( https://qiita.com/t-ohtake/items/2997d449e7e243d77109 )

HTMLリソース中の２つのdocument.write() の内１つをコメントアウトすると、
正しく表示されますが、
どちらも順番に表示させようとするとimg_2のようにどちらか一方のみしか表示されません。
また、何回か連続でリロードするとどちらか一方だけに固定されている訳ではなく、
タイミングによってはもう一つの方が表示されると言った感じでした。

原因が分かる方がいらっしゃいましたら恐れ入りますが、
ご教示を頂けますと幸いです。

HTMLコード( index.html )

<!DOCTYPE html>
<html lang="en">
    <title>Document</title>
</head>
<body>

    <!--スクリプト読み込み-->
    <script type="text/javascript" src="index.js"></script>

    <script>

    //画像１表示
    document.write('<IMG src="/Users/apple/Desktop/frontend/img/apple.jpg" id="gazou1" name="gazou1" style="visibility : hidden;" onload="FadeInstr(1)">');

    //画像２表示
    document.write('<IMG src="/Users/apple/Desktop/frontend/img/orange.jpg" id="gazou2" name="gazou2" style="visibility : hidden;" onload="FadeInstr(2)">');

    </script>


</body>
</html>

JavaScriptコード(index.js)



opa=0; //透明度　0は透明
opacnt=3; //透明度の増減の間隔
timer=100; //setTimeout関数の実行間隔　ミリ秒
gazouId = "";//対象の画像

// フェードイン
  function FadeInstr(id)
     {

     //対象の切り替え
          if(id==1){
               gazouId = "gazou1";
          }else{
               gazouId = "gazou2";
          }
        MyIMG = document.getElementById(gazouId);
        MyIMG.style.visibility = "visible";
        FadeIn1(gazouId,opa);

            }
            //透明度を増加。
            function FadeIn1(gazouId,opa)
            {
                if (opa <= 100)
                {
                    MyIMG.style.filter = "alpha(opacity:"+opa+")"; // IE のソース
                    MyIMG.style.opacity = opa/100; //Mozilla Firefoxのソース
                    opa += opacnt;
                    setTimeout("FadeIn1('"+gazouId+"',"+opa+")", timer);
                }
            }