質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2531閲覧

JSを実行すると重くなるがどこで重くなるのかわからない

zunda_mochi

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/10/30 05:55

編集2018/10/30 07:32

前提

勉強のため、普段jQueryで対応しているものをJavaScriptで作成してみました。
作成したのは、ページ内スクロールになります。(目次やページTOPで使用する予定です。)

発生している問題

作成しWebサイトに実装したところ重くなってしまい動きも悪くなりました。
Chrome Developer Toolsで原因を探ろうとしましたが、探ると止まってしまい計測できません。
このような質問で申し訳ございませんが、少しでも解決できるでしょうか。
よろしくお願いします。

該当のソースコード

const ankerClickPageMove = function() { //定数 const anker = document.querySelectorAll('a[href^="#"]:not([target="_blank"])'), ankerNum = anker.length, max = 100, interval = 10; //アニメーション function easeOut(p) { return p * (2 - p); }; //位置取得 function getTargetTop(elm) { const href = elm.getAttribute('href'), target = document.querySelector(href), info = target.getBoundingClientRect(), posY = info.top + window.pageYOffset; return posY; }; //位置情報へ移動 function setTargetMove(elm) { //変数 let progress = 0, goal = 0, action = null; //定数 const start = window.pageYOffset, //スタート位置 pos = getTargetTop(elm), //最終位置 diff = pos - start, upOrDown = diff <= 0, move = function() { progress++; goal = start + (diff * easeOut(progress / max)); window.scrollTo(0, goal); // 目的位置より進んでいなければ続行 if ( (upOrDown && pos < goal) || (!upOrDown && goal < pos) ) { action = setTimeout(move, interval); } else { clearTimeout(action); progress = null; goal = null; action = null; } }; action = setTimeout(move, interval); }; //クリックイベントをセットする function setClickEvent() { for(let i = 0; i < ankerNum; i++) { const _self = anker[i]; _self.addEventListener('click', function(e) { e.preventDefault(); setTargetMove(this); }); } }; setClickEvent(); } ankerClickPageMove();

追記1

アドバイスを元に修正してみました。
前より軽くなり、計測もできるようになりました。
ただ、計測時は重くないブラウザが止まってしまいますが。。。

const ankerClickPageMove = () => { //定数 const anker = document.querySelectorAll('a[href^="#"]:not([target="_blank"])'), ankerNum = anker.length, max = 50, interval = 10; //アニメーション function easeOut(p) { return p * (2 - p); }; //位置取得 function getTargetTop(elm) { const href = elm.getAttribute('href'), target = document.querySelector(href), info = target.getBoundingClientRect(), posY = info.top + window.pageYOffset; return posY; }; //位置情報へ移動 function setTargetMove(elm) { //変数 let progress = 0, goal = 0, action = null; //定数 const start = window.pageYOffset, //スタート位置 move = function() { let pos = getTargetTop(elm), //最終位置 diff = pos - start, upOrDown = diff <= 0; progress++; goal = start + (diff * easeOut(progress / max)); window.scrollTo(0, goal); // 目的位置に到達したらSTOP if ((upOrDown && pos >= goal) || (!upOrDown && goal >= pos)) { clearInterval(action); progress = null; goal = null; action = null; } }; action = setInterval(move, interval); }; //クリックイベントをセットする function setClickEvent() { for(let i = 0; i < ankerNum; i++) { const _self = anker[i]; _self.addEventListener('click', function(e) { e.preventDefault(); setTargetMove(this); }); } }; setClickEvent(); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

setTimeoutを関数内で2回実行していて、その上タイマーIDを関数内の変数actionに格納しているため一度もクリアされていないのでは。

投稿2018/10/30 06:13

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zunda_mochi

2018/10/30 07:35

確認、解答ありがとうございます。 アドバイスを元に、ループの関数を1つにまとめるために、setTimeoutからsetIntervalに変更してみました。 前よりは軽くなったと思います。 ありがとうございます。
guest

0

ankerにものすごい数の要素が入ってるとかですかね?
ankerNumを確認して数件なら関係ないと思いますが。。

投稿2018/10/30 06:16

tomoyuki123

総合スコア273

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zunda_mochi

2018/10/30 07:26

確認、解答ありがとうございます。 ankerが1個で重くなり、数も減らせないのでこの部分はこのままで行こうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問