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完全初心者が、モジュールを作成して、ディレクトリを非同期で読み取り、ファイルをコンソールに出力する方法 こんにちは。ディレクターのエリカです。 こちらは、Node.jsという言葉を聞いて「何となくはわかるけど、実際にどんなものか触ったことがない」という初心者の方に向け、チュートリアル用モジュール「learnyounode」でエクササイズをしていくコーナーの第6回目です。 前回は、ディレクトリを非同期で読み取りファイルのリストを出力する問題について紹介しました。 今回は、これまでのエクササイズで便利だった「モジュール」というものを作ることになります。 Node.jsを勉強したいと思っている人のキッカケや第一歩になれば幸いです。それでは早速はじめていきましょう MAKE IT MODULAR（Exercise 6 of 13） 「learnyounode」のインストールがまだの方
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
jQuery.ajax()の非同期通信で実行順序を保証する方法
jQuery.ajax()の非同期通信で実行順序を保証する方法を紹介します。 具体的には、jQuery.ajax()による非同期通信を連続して実行する場合やjQuery.ajax()メソッドによる非同期通信と他の処理を続けて実行する場合、お互いの実行順序を保証する方法です。 本エントリーではjQuery1.8を使って解説します。その関係で、done()メソッドを使っています。done()がサポートされていないバージョンであればsuccess()に読み替えてください。 １．jQuery.ajax()の仕様 「仕様」という表現は適切でないかもしれませんが、例えばjQuery.ajax()による非同期通信を連続実行した場合、実行結果の順序は不定です。 簡単なサンプルとして、for文の中でjQuery.ajax()を実行するコードを用意しました。 <meta charset="utf-8" />
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
非同期コードで Google +1 ボタンを設置してみた
表示速度を従来より 3倍高速にした新しい Google +1 ボタンが発表されましたが、同時に追加された非同期スニペットに関して、それを有効にするためのソースコードが、現時点ではボタン設置コード生成ページの言語設定を英語にしていないと表示されないようなのでメモ。 先日 Google は、「Official Google Webmaster Central Blog」 で、「Google +1 ボタン」 のレンダリング速度を今までよりも 3倍高速にしたと発表しました。もともとが遅すぎたんだよという指摘はあるものの、「通常の 3倍」という響きは魅力的… The +1 Button: Now Faster ： Official Google Webmaster Central Blog さて、この 3倍速い Google +1 ボタンに関しては、Google さんが勝手にアップデートしてくれるの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
反復処理の制御｜イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理