+ JavaScript の質問用スレッド vol.124 +

2021/11/10(水) 15:24:24.80

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

※前スレ
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured

2022/02/18(金) 10:44:02.23

初心者は、jQuery を使えばよい

分かりにくい、this の意味も変えてある

2022/02/18(金) 11:35:27.02

jQuery で、ボタンの外側・親にイベントを付けて、親で、子のイベントをキャッチできる

<div id="btn-wrap">
<button class="BtnA BtnAll" value="1">A-1</button>
<button class="BtnA BtnAll" value="2">A-2</button>
<button class="BtnB BtnAll" value="3">B-3</button>
</div>

$( function ( ) {
// 外側・親にイベントを付けて、親で、子のイベントをキャッチする
$( '#btn-wrap' ).on( 'click', function ( event ) {
const value = $( event.target ).prop( 'value' )
console.log( value )
alert( value )
} );
} );

または、共通のclass を付けて、そのクラスだけのイベントをキャッチできる

// .BtnA のみ
$( '.BtnA' ).on( 'click', function ( event ) {
const value = $( this ).prop( 'value' )
console.log( value )
alert( value )
} );

**488** (ﾜｯﾁｮｲ c62c-bORD [153.136.94.40]) · 2022/02/18(金) 12:16:47.94

>>488
に追加

セレクターをカンマで区切れば、A またはB でも出来る

// .BtnA or .BtnB のみ
$( '.BtnA, .BtnB' ).on( 'click', function ( event ) {
const value = $( this ).prop( 'value' )
console.log( value )
alert( value )
} );

2022/02/18(金) 12:23:50.32

>>483-485
やってみますありがとー

2022/02/18(金) 12:38:42.82

イベントのバブリングを学ぶにはいい機会（丁度よい題材）だとは思うけど、「初心者に向けて」というエクスキューズでもって今時jQueryを勧める態度には悪意に近いモノを感じる

2022/02/18(金) 21:37:34.77

今後廃れていくだけだもんな
新たに学習する必要はないわな

2022/02/19(土) 09:29:33.08

こんにちはこのたびはお世話になります
Javaスクリプトの質問ですが
いろいろ煮詰まっておりさしあたり
変数のスコープとオブジェクトのことがよくわからないでして
変数は関数内のみのローカルありますよね
でオブジェクトも
var obj=new obj()
といったインスタンツなら変数とおなじでローカルだったりグローバルだったりするんですかな
まずは以上よろしくお願いします

2022/02/19(土) 09:52:37.76

もうvarは使うな以上

2022/02/19(土) 12:07:18.29

バーよりレッツを使うんですね承知しました。
ブラウザ画面内に表示されたDOMオブジェクトは常にグローバルなんですかね
何もかもがわからん

2022/02/19(土) 13:34:02.57

window.document.body, window.document.head など、
windowオブジェクトはグローバル

windowが無くても、document.head でも同じ

window.document.head == document.head
//=> true

例えば、Pjax で、ページを作っている場合、
ページ遷移したように見えても、window に追加したオブジェクトは初期化されない。
そのまま残っている

ページの一部分しか変更されていないから。
ページをreload していないから

2022/02/19(土) 16:01:34.02

Pjax is なに

2022/02/19(土) 18:28:21.70

>>491
むしろ悪意そのものでしょ

2022/02/19(土) 18:38:03.12

参考書に、Javaスクリプトにはクラスの概念はない、て書いてあるんですが
もしかして情報が古い？

2022/02/19(土) 18:39:00.10

はい

2022/02/19(土) 18:43:12.48

その本で勉強するのやめたら
varを使ってるのもそのせいだろうし

2022/02/19(土) 19:02:00.92

>>499
「クラスの概念がない」は正しい
JavaScriptはプロトタイプベースでclass文は糖衣構文だからな

そういう意味で書かれているのなら正しいといえるが、書籍を持ってない人が文脈を読みとれるはずもない
書籍の正しさを保証するのはその書籍を持っている人だけ

2022/02/19(土) 19:05:31.85

まあvar使ってる時点でES15以前だから読む価値なしですね

時間の無駄なんでその本を投げ捨てろ

2022/02/19(土) 19:06:29.96

>>499
あと、正しさを気にするなら、カナ交じり用語を使うのを止めた方がいい

・Javaスクリプト
・バー
・レッツ

2022/02/19(土) 21:14:26.70

マジレス…

2022/02/19(土) 22:06:51.12

こんばんはいつもお世話なります
今日でかなり学習は進みましたありがとうございます
さっそく質問ですが
クロッパーJSという便利ライブラリを見つけて解析しております
ところが
fileReaderでダイヤログを出してjpg画像なりを読んでまずは画面にプレビューしますが、
あっ間違えたのテイで再度fileReaderして別の画像を読み込むのですが
プレビュー画面が前のまま変わらないのです
以上よろしくお願いします

2022/02/19(土) 22:16:58.88

>>506
クロームdevtoolでソースcodeを解析してみればいいんじゃないかな
ネタ品質が低くてすまん

2022/02/19(土) 23:27:47.87

クロッパーJSの公式デモページ(エマワトソンの写真のやつ)でImport Image with Blob URLsというボタンは
何度でも写真を読み直しできるんですよ
インスタンスをデストロイがカギとは思うのですが

2022/02/19(土) 23:34:29.04

>>508
デモページのソースをディフってみたら？

2022/02/20(日) 01:15:27.52

クロッパーのことですけんど
なかなか敷居が高いですわ
インタネッツでもたくさんの人が2回目の読み込みをどうするか質問してますね

2022/02/20(日) 03:05:26.93

ふう、なんとかやれましたよ
大儀であつた

**日記帳** (ﾜｯﾁｮｲ 3301-BRhT [126.241.27.53]) · 2022/02/20(日) 16:34:24.33

こんにちは今日も格闘しております
グーグルマップのリーフレットプラグインで、写真を地図に貼り付けています
複数貼った時の処理でまた壁につきあたりました
貼り付け関数で作るインスタンスが「imgovlay」なんですがその名前なら例えばimgovlay.options.cornersってやれば四つ角の座標がとれるですけんど
3枚はったあとからでは1枚目の座標が調べられんとです
これはどんな工夫したらよいのやら
以上よろしくお願いします

2022/02/20(日) 17:20:03.63

日記ならそろそろ個人ブログでも作ってやったら
前にレスくれてる人は無視、相変わらず中途半端なカタカナ表記で聞きたいこともわかりにくいし書いてるコードも貼らない
一応エスパーしとくと、配列でインスタンス全部持っておくだけでは？

**日記帳** (ﾜｯﾁｮｲ 3301-BRhT [126.241.27.53]) · 2022/02/20(日) 17:28:08.35

ジェーンスタイルというアプリでこのスッドレを見ておるますが、タグのあるコードのコピペはできないんですよ

2022/02/20(日) 17:31:05.62

まず最初に>1-2を丁寧に見るといいよ、というか見て
http://ideone.com/
http://jsfiddle.net/

**日記帳** (ﾜｯﾁｮｲ 3301-BRhT [126.241.27.53]) · 2022/02/20(日) 17:50:37.16

はい承知しました
大儀であった

2022/02/20(日) 18:25:51.02

ID:vRC3RkLD0はネタ質問と思ってる
全く面白くないが

2022/02/21(月) 02:08:54.33

Chrome拡張機能のjsファイルを修正しようとしているんだけど
（バグが出たのに作者放置で逃亡ｗ）
JSファルダの中にいくつかjsファイルがあるけど、どれが最初に読み込まれるのですか？
また、グローバル変数はファイルを超えて使えますか？

2022/02/21(月) 04:36:00.42

>>518
まずは複数の実行コンテキストが存在することを把握するといい
chromiumのmanifest V2拡張機能はこの年末にサポート終了が予定されているので、その拡張機能がV2の場合はV3に作り直すことをオススメする

2022/02/23(水) 08:42:30.40

質問です。.cgiのページにcanvasの
https://www.google.com/amp/s/torisky.com/javascript%25EF%25BC%259Acanvas%25E3%2581%25AB%25E9%259B%25AA%25E3%2581%25AE%25E7%25B5%2590%25E6%2599%25B6%25E3%2582%2592%25E9%2599%258D%25E3%2582%2589%25E3%2581%259B%25E3%2582%258B/%3famp=1を設定するにはどこのページにコード貼り付ければいいのでしょうか？全部.cgiの中で大丈夫ですか？

2022/02/23(水) 10:35:21.54

HTML部分

<!DOCTYPE html>
<html>
<head>
って書いてるから無理なんかな……index.htmlじゃなくて.cgi直のURLに設定したいんだけど……

2022/02/23(水) 11:28:37.94

>>521
こんにちは
cgiてのはperlのコトですかね
perlやPHPはHTMLをまるっと吐き出せるんですよ
だからjavascriptの仕掛けのあるHTMLをまず作ってみて、その内容をまるごとcgiでprint文などで出力します

2022/02/25(金) 20:59:11.76

てｓｔ

2022/02/25(金) 20:59:52.69

C＃からJavaScriptをコールしたいのだが、このJavaScriptは.jsファイルに入れるのではなく、
htmlファイル内に書かないといけないのかな？

2022/03/06(日) 20:50:59.24

setIntervalでtimer1が起動中のときはtimer2を起動させないようにするにはどうやればいいんですか？

2022/03/06(日) 20:59:50.64

>>525
setIntervalのラップ関数を作って排他制御する

2022/03/06(日) 21:36:36.90

>>526
なるほどー
それとsetIntervalも戻り値は0になることはないのですか？

2022/03/06(日) 22:53:26.23

timer の状態を調べる、属性とかは無いの？

2022/03/08(火) 21:51:27.12

>>528
返り値はただのNumber値
プロパティは埋め込めない

2022/03/08(火) 22:09:04.89

>>527
戻り値は正の整数

2022/03/09(水) 08:20:41.91

数日前からjavascriptやらされてるんだけど質問
ajax関係の処理が例えばJqueryだと$.ajaxとかで終わった時の処理とか
エラーだったときの処理とかで分かれてるじゃない？
こういうAPIへのリクエストは全部まとめたいからsuccessにreturnするfunctionにしたら
使う側では瞬間帰ってきてundefinedになってしまう・・・
asyncなんだから当たり前だと言われたらそれまでなんだけど
そして毎回$.ajaxをそこら中で呼び出すことになる
これってそういう言語だからあきらめろしか無い感じ？
もちろんasyncをfalseにしろという話になりそうだけどブラウザがメインスレッドでやらんほうがいいとか警告出してくるし

2022/03/09(水) 08:38:01.00

よく分からんけどコードが間違ってるだけな気がする

2022/03/09(水) 09:30:24.96

>>531
awaitを使えば返り値でとれる
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await

別スレで似た質問があったが、同一人物ではないよな？
https://mevius.5ch.net/test/read.cgi/hp/1478002550/499
質問者の応対が酷かった

2022/03/09(水) 10:14:14.84

>>532
>>533
ごめん色々試してみて自己解決したかも
$ajaxをfunctionに包んでたけど単にreturnするのがsuccessに与えてる無名関数へのreturnになってるからな気がした
その質問者はしらんけどそんなすれあるのねスレチならあっちいくわ

function getdata() {
$.ajax({
type: 'post',
url: 'aaaa',
contentType: 'application/json',
dataType: 'json',
success: function(jsondata) {
return jsondata;
});
}
呼び出し元
var a = getdata();
これでaがnullなのはasyncとかだと思ってたけどfunctionの返し先が無名関数だからだと思う
こういう場合javascript的にはどうするのが定石なの？
getdataの引数に結果を入れる変数渡すの？

2022/03/09(水) 10:18:12.60

>>534
PromiseかDeferredを使う

2022/03/09(水) 10:24:10.95

>>535
やばいこれおもしろいね
また世界が広がったわありがとう！
javascript始めてみて非同期処理の世界で頭おかしくなりそう
threadやforkとは微妙に違うおもしろさがある

2022/03/09(水) 10:59:23.57

今時fetch使おうよ

2022/03/09(水) 11:12:57.49

ブラウザ資源を独占できない以上非同期なのは仕方がない
隅っこに入れたWEB広告が通信するから描画スレッド止めますなんて言い始めたらぶん殴るわ

2022/03/09(水) 11:18:48.71

>>531
強制されてるなら別だけど、とりあえずjQueryはヤメた方がいい

2022/03/09(水) 18:13:15.28

>>539
素？のJavascriptの方が良いって事かな？
ブラウザー対応考えたら楽だと聞いたけど動作対象がモダン環境なら気にしなくても良いとか？

2022/03/09(水) 20:06:52.37

>>540
caniuseやMDNで互換性を調べよう
https://caniuse.com/fetch
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7

2022/03/09(水) 20:17:36.42

IE6ぐらいはサポートしとけ
長期デフォルトブラウザの実績は覆せない

2022/03/09(水) 20:24:49.60

>>542
MSのサポート期限を調べよう
https://www.google.com/search?q=ie6+%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E7%B5%82%E4%BA%86

2022/03/09(水) 20:30:03.00

>>540
IE対応するかしないかでほぼ決まる
お仕事ならお客さん次第

2022/03/10(木) 04:35:08.01

>>540
そうなんだありがとう
caniuseで見たら一番下の緑4個の行だけがターゲットだからfetchで良いんかな
Javascript=JQueryってのが当たり前になってるから意識変えれそうで良かった

2022/03/10(木) 16:41:12.37

>>545
対応ブラウザの問題がないならfetchで良いと思う
未対応ならPolyfillの選択肢もある

2022/03/11(金) 21:03:13.79

JavaScriptに「型」を～Microsoftが新構文を提案へ
https://www.google.com/amp/s/forest.watch.impress.co.jp/docs/news/1394/209/amp.index.html

これは気になる
仕様化されるのかね…

2022/03/12(土) 12:10:31.15

VScodeを使っていますが
この画面のカスタマイズはできますか
具体的には、ソース全体の縦長のビューがあってそのうち今見ているところが少し明るく表示されてますよね？その色が分かりにくい！
つかんでドラッグしたくても見つけにくい！
もっとハッキリした色にできますか

2022/03/12(土) 12:37:17.47

>>548
Visual Studio Code / VSCode Part11
https://mevius.5ch.net/test/read.cgi/tech/1632311131/

2022/03/12(土) 18:02:33.03

<html>
<head>
<meta charset="UTF-8">
<title>てすと</title>
</head>
<body>

<スクリプト>
for(let n=1;n<=300;n++){
let str = "<p>" + n + "</p>";
document.write(str);
}
alert(document.body.clientHeight);
alert(window.innerHeight);
</スクリプト>

</body>
</html>
ページ全体の高さを求めたいけどdocument.body.clientHeightで
695と表示されウィンドウの高さと同じになってしまいます。
どうすればちゃんとページの高さが求まりますか？

2022/03/12(土) 21:32:42.84

web 系の質問は、web制作管理板の方のスレで聞いてください！

この板のスレは以前、荒らしが出た時に、緊急避難用に立てたもので、
本来はweb制作管理板の方です

2022/03/12(土) 21:36:30.85

>>550
document.body.scrollHeight
document.documentElement.clientHeight

2022/03/12(土) 22:58:01.42

>>551はただのコピペなので気にしないように
Web制作板の現状は>>213,253

**551** (ﾜｯﾁｮｲ bd2c-lWiN [180.52.201.48]) · 2022/03/12(土) 23:28:29.22

ここはプログラム板

HTML, DOM, CSS/SASS や、ブラウザ・サイトのページの知識などは、
web制作管理板の方がよい。ウェブ制作

それ以上のフレームワークなどは、WEBプログラミング板。ウェブ開発

YouTube で有名な、雑食系エンジニア・KENTA の本でも、
ウェブ制作はフロントエンド・コーダー、
ウェブ開発はバックエンド・SE みたいに、異なる分野となっている

2022/03/13(日) 00:51:37.82

>>552
ありがとう
<!DOCTYPE html>をつけたらdocument.body.clientHeightで取得できるようになりました。

2022/03/13(日) 15:40:27.22

オブジェクトの中で別のプロパティを参照するのはどうすればいいのでしょうか？
thisを使うとundefinedが返ってきて、thisを付けないとまだ定義されてないと
エラーが出ます。下記の例だとsideSpaceを参照したいのですが
うまくいきません。

const sp = {
width: 640,
sideSpace: 20,
space: this.sideSpace * 2,
inner: this.width - this.space,
}

2022/03/13(日) 15:48:53.49

>>556
getterかProxyを使えば良い

2022/03/13(日) 17:18:48.53

書き直してみたんですがやはりgetSpace()が未定義エラーが出てしまいます。

const sp = {
width: 640,
sideSpace: 20,

get getSpace() {
return this.sidespace * 2;
},

space: getSpace()
};

2022/03/13(日) 17:25:30.15

>>558
const sp = {
width: 640,
sideSpace: 20,
get space() { return this.sideSpace * 2; },
get inner() { return this.width - this.space; },
};
console.log(sp.space); // 40
console.log(sp.inner); // 600

2022/03/13(日) 17:26:15.54

>>558
spaceとinnerをgetterにすれば良い

2022/03/17(木) 19:32:02.34

関数の引数にオブジェクトを使ってる時要素を固定する方法ってある
例えば

function main(obj){
obj.a;
obj.b;
}

みたいなときaとbだけの要素を受け入れたいんだけど

2022/03/17(木) 19:36:12.35

一応その要素があるかで判断して返すって方法はわかるどそれ以外でシンプルな感じで出来ないかなと思って

2022/03/17(木) 19:38:09.18

理解できないから適当に答えるが
objに必要なメンバーだけを抽出複製するメソッドを作ってみては？

**デフォルトの名無しさん** · 2022/03/19(土) 14:30:35.47

aysncとawaitで頭がこんがらがってきました

function sleep() {
return new Promise(resolve => {
setTimeout(()=>resolve(),2000);
});
}

async function run(x) {
var a = await sleep();
var b = await sleep();
return x;
}
run(10).then(v=>console.log(v));
//これは4秒後に10と表示されます
//しかし、、

async function run2(x) {
var a = sleep();
var b = sleep();
var _a=await a;
var _b=await b;
return x;
}
run2(20).then(v=>console.log(v));
//これは２秒後に10と表示されます

//一体なぜ・・
var _a=await a; //ここで２秒待ち、
var _b=await b;//ここで２秒待ち、
だと思ったのですが・・・

2022/03/19(土) 14:37:22.28

>>564
遡ってのawaitは不可能

2022/03/19(土) 14:47:10.12

>>564
Promise内の処理がいつ開始されるのかを考えてみれば？

**デフォルトの名無しさん** · 2022/03/19(土) 15:19:23.16

>>565,566
なるほど・・？

runの方では
var a=await sleep()のタイミングで返り値Promise内処理がされてresolve()されるまで（２秒）待ち、
次いでvar b=await sleep()の計４秒
これはしっくりくるのですが

一方、run2の方では
var a = sleep();
var b = sleep();
の段階ではPromise内処理は実行されませんがa,b共にPromise格納
var _a=await a;のタイミングでawait Promise
次いでvar _b=await b;await Promise
だと思っていましたが
＞遡ってのawaitは不可
つまり一度変数に格納した場合はrun1のようにはならず、非同期で_a,_b時にPromise内処理がされる
ということでしょうか

run2のようなパターンはあえてそういう処理として使っていいのか、それとも
基本的に変数とかに置かずにawait Promiseした方がいいのか
まだちょっとよくわかりませんがスッキリしました
ありがとうございます

2022/03/19(土) 15:33:49.12

runのパターだと非同期ではあるが直列動作
run2はsleepとawaitの間に別の処理を置いたり並列的な動作ができる
どっちがいいかはケースバイケース

2022/03/19(土) 15:41:31.50

そもそもそんな使い方するな

2022/03/19(土) 16:13:33.28

同期関数の使い方や処理タイミングはともかく、run2(20)としておきながらコンソールに10と出るのはおかしい

**デフォルトの名無しさん** · 2022/03/19(土) 16:25:28.50

asyncとawaitのくだりでついでにもひとつ質問です
function sleep(x) {
return new Promise(resolve => {
setTimeout(()=>resolve(),x*1000);
});
}
async function run1(){
console.log("run1 start");
await sleep(5);
console.log("run1 end");
}

async function run2(){
console.log("run2 start");
await sleep(2);
console.log("run2 end");
}
function run(){
run1();
run2();
}
run();

これはrun1(),run2が非同期処理されて
狙った意図になりました
そこで今度はrun1()が処理しきったあとにrun2()を処理したい
つまり、run1 endと表示されてからrun2 startが表示されて
みたいな同期処理をしたいなと思いました
コールバックすれば簡単なのでしょうがせっかくなので
awaitとか活用した感じで書いてみたくrun1のとこにPromiseを返したりしてみましたが無限ループでブラウザが固まりました
何かいい案はありますでしょうかよろしくおねがいします

**デフォルトの名無しさん** · 2022/03/19(土) 16:32:40.17

改めてやってみたらできました
おそらくブラウザがフリーズしたのはrunとrun1を間違えてたようです
成功したのはこれです↓
こんな感じで合っているのでしょうか

async function run(){
await new Promise(resolve=>{
resolve(run1())
});
run2();
}
run();

2022/03/19(土) 16:40:03.87

asyncな関数はPromiseを返すので
async function run(){
await run1();
run2();
}

**デフォルトの名無しさん** · 2022/03/19(土) 16:46:15.37

>>573
！
なるほど
なんかわかってきた気がします・・！
ありがとうございます

2022/03/19(土) 17:13:19.06

他人がみてわからん書き方すんなよ

**デフォルトの名無しさん** · 2022/03/19(土) 17:41:45.59

やりたいことはざっくり>>571を例にすると
run1やrun2は非同期、同期どちらでも使えるようにしておいて
awaitするときは同期、しないときは非同期
という感じなのですが
他人からみてわかりにくいですかね・・？

もちろんrunの名前と中身によりますが
run1();
run2();
↑これは非同期だろうな
await run1();
console.log("途中");
await run2();
console.log("最後");
↑awaitついてるから同期だろうな
みたいに直感的にフローがわかるように思うのですが
もしかしてバグ生みそうな何かがあるのでしょうか

**デフォルトの名無しさん** · 2022/03/19(土) 17:44:55.70

補足
run1,2自体は非同期ではない？ですね
run1,2内のawaitの部分が非同期なだけであって
そこら辺、中身みないとわかりにくいですかね

2022/03/19(土) 18:31:46.85

>>571-572
回りくどい処理しか見えなくて、その書き方をする意図の理解に苦しむ
run1とrun2をPromise化してPromise.all()ではダメなのか？

2022/03/19(土) 20:13:47.31

コールバック関数入れ子呼び出し地獄
↓
Promise then数珠繋ぎ地獄
↓
async await
と書き方が変わって来たのでPromise thenとasync awaitを混ぜて書くのはおかしい。
使いやすい方を使えば良いと思うけど非同期処理で取得したデータをいくつも使う場合はasync awaitで書いたほうがスッキリ書けるよ。
Promise thenみたいだとthen途中まで中途半端に行コピペするミスとか起きる

**デフォルトの名無しさん** · 2022/03/19(土) 20:20:09.04

>>578
ありがとうございますやってみました
function sleep(x) {
setTimeout(()=>console.log("sleep",x),x*1000)
}
function msg(n){
console.log(n)
}
function run1(){
return new Promise(resolve=>{
msg("run1 start");
sleep(3); //この非同期処理を同期処理にしたい
msg("run1 end");
resolve("run1 success");
})
}
await Promise.all([run1()]).then(result=>{console.log(result)});

がsleep(3)のとこが非同期になってしまいます・・

2022/03/19(土) 21:34:54.50

awaitはasync関数内でしか使えないよ

**デフォルトの名無しさん** · 2022/03/19(土) 22:45:17.97

>>581
たしかにそうでした・・
とりあえずすべてpromise化してnew Promise内にPromiseとかやってみましたが
うまくいかず・・
>>579
そういう系譜があったのですね

とりあえず現状はうまくいっているasync awaitでやってみます
ありがとうございました

2022/03/20(日) 07:50:06.50

もうめちゃくちゃだなw
そもそも何をしたいのかすらわからなくなった

2022/03/20(日) 09:48:36.58

横からすみません！
async や await は関数の頭だけに付けれる認識でしょうか
単なるメソッドの前にawaitをつけれないんですね
たとえばアラート1と2がテレコにしたくないからといって下記のような書き方は不可ということでよいでしょうか

async hoge(){
await alert("1");
alert("2");
}

2022/03/20(日) 11:26:58.56

>>584
async function hoge() {
await alert('1');
alert('2');
}

2022/03/20(日) 11:44:24.57

http://newmofu.doorblog.jp
このサイトなんですが、RSSはjavascriptで取得しているんでしょうか？

2022/03/20(日) 13:15:28.93

>>584
classメソッドはそんな感じでok
でもそのalertがwindow.alertなのだとしたらawaitは無意味