JS：複数の画像読み込みが完了した時点で処理をしたい
Promiseオブジェクトを使うと「画像読み込み完了後に関数の戻り値を返す」などの非同期処理完了後の動作をJavaScriptで記述できる。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="main.js"></script> <title>画像を読み込んだあとに処理をする（複数画像） </title> <style> *{ margin: 0; padding: 0; } body{ margin: 50px; } </style> </h
WP REST APIでキーワード検索をしたら非同期で検索結果を表示
// ボタンクリックでイベント開始 document.getElementById("search-button").addEventListener("click", async () => { const searchInput = document.getElementById("search-input"); const searchResults = document.getElementById("search-results"); // 文字列の両端の空白を削除 const keyword = searchInput.value.trim(); // キーワードなしの場合無反応 if (keyword.length === 0) { return; } const targetSiteUrl = 'https://jobtips.net/'; // APIで取得したいURLを
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
コーディング作業が爆速に！ すぐ使える便利なHTML5スニペット15個まとめ
HTMLはとても簡単に作成できますが、Webページの制作となると、フォームの作成など、何度も繰り返す必要のある作業もあります。このユーザーガイドでは、コーディング作業ですぐに使えるフロントエンド向けHTMLスニペット15個をまとめてご紹介します。 HTML5基本テンプレート 新しいWebプロジェクトを開始するときは、基本となるテンプレートが必要です。HTML5の基礎として役立つ、無駄のないスッキリとしたテンプレートです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無名のドキュメント</title> <meta name="description" content="メタディスクリプションを記述します。"> <link rel="stylesheet" type="text/css" href="theme.css
遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく、単体で動作します。 Bounds.js -GitHub Bounds.jsの特徴 Bounds.jsのデモ Bounds.jsの使い方 Bounds.jsの特徴 画像の遅延読み込み、無限スクロールなどの実装には、境界を設定することが重要です。通常は、イベントハンドラ、ループ、getBoundingClientRectの呼び出しの組み合わせが必要でしたが、これらはメインスレッドで実行されるため、パフォーマンスが低下します。Bounds.jsは要素と境界の交差を非同期に検出し、パフォ
Node.js完全初心者が、ディレクトリを非同期で読み取り、ファイルをコンソールに出力する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのエリカです。 こちらは、Node.jsという言葉を聞いて「何となくはわかるけど、実際にどんなものか触ったことがない」という初心者の方に向け、チュートリアル用モジュール「learnyounode」でエクササイズをしていくコーナーの第5回目です。 前回は、ファイルを非同期で読み取り、行数を出力する問題について紹介しましたが、今回はディレクトリを非同期で読み取り、ファイルをコンソールに出力する方法をご紹介します。 Node.jsを勉強したいと思っている人のキッカケや第一歩になれば幸いです。それでは早速はじめていきましょう。 FILTERED LS（Exercise 5 of 13） 「learnyounode」のインストールがまだの方は、こちらからどうぞ。 Node.js完全初心者向けチュートリアル用モジュール「learnyounode」を使ってみよう 問題 あるディレ
jQuery.getScript()のまとめ
jQuery.getScript()について、逆引きリファレンスっぽくまとめてみました。 １．getScript()とは？ getScript()は、JavaScriptファイルを非同期で取得するためのメソッドです。 $.getScript( "http://user-domain/foo.js", function( script, textStatus, jqxhr ) { //... }); クロスドメインに対応しているので、外部サーバのJavaScriptファイルを取得することも可能です。 getScript()は、次のajax()メソッドのショートハンドになります。 $.ajax({ url: url, dataType: "script", success: success }); ２．送信先URLを指定するには？ 送信先URLは第1パラメータに設定します。 $.getScri
Socialite by tmort
View the Project on GitHub tmort/Socialite Download ZIP File Download TAR Ball View On GitHub Socialite v2 Because if you're selling your soul, you may as well do it asynchronously. Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event! Author: David Bushell http://dbushell.com @dbushe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
反復処理の制御｜イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理