非同期処理で並列処理。お腹いっぱい #jscode
2023.06.10
おはようございます。１８時でも明るくていつカーテンを閉めればよいのか分からないです。さて、非同期処理で並列処理のコードを一週間前にＴｗｉｔｔｅｒで呟いたので、ソースコードをこちらにUPします。非同期処理で並列処理を行うのは、こういう感じだということを理解できると思います、あまり非同期処理で並列処理を行う機会なんて無いかもしれないですが、こういう事が出来るんだということを頭の片隅に置いとくと良いかもです😌。
がっちり覚えとくのも良いですけど、曖昧に覚えているのも悪くないと思います。因みに自分はこういう事は出来るだろうと自分は思っているタイプです。自分が考えていることぐらい頭の良い人は考えているはずなので、出来るだろうという事から始まって大体、ググったりChatGPTに聞くと最適解を教えてくれます。そういう訳でサンプルコードとサンプルサイトのリンクを貼っときます。
https://zip358.com/tool/demo76
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("test1");
resolve(1);
}, 15);
});
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("test2");
resolve(2);
}, 11);
});
let p3 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("test3");
resolve(3);
}, 16);
});
let p4 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("test4");
resolve(4);
}, 1);
});
let p5 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("test5");
resolve(5);
}, 9);
});
(async()=>{
let a = await Promise.all([p1, p2, p3, p4, p5]);
console.log(a);
})()
タグ
A`, async, await Promise.all, ChatGPT, console.log, gt, new Promise, quot;test1", quot;test2", quot;test3", quot;test4", quot;test5", reject, resolve, setTimeout, Twitter, いつカーテン, 並列処理, 最適解, 片隅,
404の画像をno-imageにする#jscode
2023.05.16
おはようございます、404の画像をno-imageにするコードです。案外簡単なコードですが、これでノーイメージに変換できます。因みに参照した404ページが404のステータスを吐き出していなかったら、このJSコードは機能しません。
if(document.querySelectorAll("img")){
[...document.querySelectorAll("img")].forEach(elm=>{
fetch(elm.src).then(response=>{
if(!response.ok){
elm.src = "no_image1.gif";
}
});
});
}因みに自分のブログサイトもこんな感じのコードを埋め込んでいます。これをphp言語で対応すると処理がサーバーサイドになるので重たくなります。こういうのはJSコードで対応するのが個人的には良いと思っています。尚、JSコードとPHPを連動させて表示の有無を行うのも良いかも知れません。
画像URLを参照してレスポンスデータが返ってきます、このレスポンスの変数をconsole.log(response);で表示するとstatusなども返ってきていることが分かると思います。404ステータスだけ何かしたい場合はresponse.statusで判断するともっと厳密になって良いかも知れません。
タグ
'src', console.log, document.querySelectorAll, elm, fetch, foreach, gt, if, img", no-image, quot, response, response.ok, response.status, status, then, サーバーサイド, ブログサイト, レスポンス, 変数,
demo23、javascriptの非同期同期処理?
2020.11.18
今日はJavaScriptで非同期、同期処理のことに付いて考えてみた。関数を呼び出して返却の値を変数に渡す処理を作って頂けると非同期処理と同期処理の違いがわかるかと思います。例えばこういうJSの処理があるとします。
document.getElementById("btn").addEventListener("click", async (e) => {
test1();
test2();
test3();
await test1();
await test2();
await test3();
});
function test1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 1");
resolve('1');
}, 3000);
});
}
function test2() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 2");
resolve('2');
}, 2000);
});
}
async function test3() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 3");
resolve('3');
}, 100);
});
}こちらの処理を試すと結果、このような内容がデバックモードで表示されます。予想通りの結果が返ってきましたか？それとも予想外の結果が返ってきましたか？
asyncが付いていてawaitがついてない場合とついている場合とでは違いの差がわかるかと思います。いろいろと試してみると非同期処理の応用が出来るかと思います、逆に言えば上手く非同期処理を使いこなすことが出来るとコードが短縮出来たり、効率的に回せるのではないかと思います。自分もこれらを使っていろいろと作ってみたいですね(´Д｀)。因みに今回、Promiseを簡略化したパターンでコードを書いています。
尚、Demo23にはデモコードが存在しますので動作を検証してみてください。
https://zip358.com/tool/demo23/
タグ
addEventListener, async, async function test, await, await test, console.log, document.getElementById, function test, JS, Promise, quot, quot;btn, quot;btn", quot;click", resolve, setTimeout, デバックモード, 変数, 返却, 関数,
jsって言ってるアレ、そうアレ。
2017.12.30
この頃、知ったんだけど配列とかも参照渡しなんだね・・親切だけどココは
親切にしてほしくないところかな。
$(function(){
var FUSION= function(yabai){
var fooooooooo = yabai;
fooooooooo[0]++;
fooooooooo[1]++;
fooooooooo[2]++;
},
FUSION2= function(yabai2){
var YaYaYaaaaaaaaa = yabai2 ;
console.log(YaYaYaaaaaaaaa);
return ;
},
t=[1,2,3];
FUSION(t);
FUSION2(t);
});
上記の記述で参照渡し可能になります。
オブジェクト渡しで参照渡しになるのは何となく理解できるものの
配列も参照渡しになっちゃうのはどうかと。
じぶんとしては参照渡し行ってほしくないだよね。
でもjavascriptの場合、参照渡しになっちゃう事を覚えておいたほうが
良さげです。逆にうまく使えれば参照渡し役に立つかもしれないだろうけど。
タグ
AM, console.log, function, FUSION2, Informatics&, javascript, var fooooooooo, var FUSION, var YaYaYaaaaaaaaa, yabai2, アレ, オブジェクト渡し, じぶん, プログラミング, 参照渡し, 参照渡し役, 徹底マスター, 配列, 開発技法,
JSプラグインを作ってみた、今回はANA旅割JSプラグイン（またかよ）。
2017.09.30
JSプラグインを作ってみた、今回はANA旅割JSプラグイン・・・。
またかよと言われそうなのですが、試しに作ってみたりした。
本当はもっと簡略化できるのだけど、あえてこれを参考に作る人にも
ある程度、参考になるかなというぐらいの代物です。
昨日、datetimepickerというプラグインを仕事で見ていて最初、取り出し方などが
わからず試行錯誤してなんとか取り出すことが出来たのですが、これでは駄目だな。
前、なんか書いていたけど使わなかったらやはり忘れてしまうので
本日から一週間ぐらい、しょぼいJSプラグインを何個かリリースします。
大量のコードは仕事終わってから書くことは出来ないかもしれないけれど
サンプルプログラム程度は簡単にコードが書けるように
しておかないと行けないなという気持ちもあります。
そしてjQueryから自前のjQueryプラグインへ
仕事でもシフトしていくつもりです。
やはりコチラのほうが慣れれば楽かなと感じます。
トイウコトでANA旅割JSプラグインは
こちらからダウンロードを行なってください。
ちなみに作りかけなので、これから再編集してもらっても
構いません。なんせ適当ですから：）
https://zip358.com/tool/ana_js_p/
(function($){
var ana_tabai = {
ana75:function(d){
var dd = [];
dd[0] = d[0];
dd[1] = d[1];
dd[2] = d[2];
var dt = new Date(d[0],d[1],d[2]);
dt.setFullYear(dt.getFullYear());
dt.setMonth(dt.getMonth());
dt.setDate(dt.getDate()-74);
dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
},
ana55:function(d){
var dd = [];
dd[0] = d[0];
dd[1] = d[1];
dd[2] = d[2];
var dt = new Date(d[0],d[1],d[2]);
dt.setFullYear(dt.getFullYear());
dt.setMonth(dt.getMonth());
dt.setDate(dt.getDate()-54);
dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
},
ana45:function(d){
var dd = [];
dd[0] = d[0];
dd[1] = d[1];
dd[2] = d[2];
var dt = new Date(d[0],d[1],d[2]);
dt.setFullYear(dt.getFullYear());
dt.setMonth(dt.getMonth());
dt.setDate(dt.getDate()-44);
dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
},
ana28:function(d){
var dd = [];
dd[0] = d[0];
dd[1] = d[1];
dd[2] = d[2];
var dt = new Date(d[0],d[1],d[2]);
dt.setFullYear(dt.getFullYear());
dt.setDate(dt.getDate()-27);
dt.setMonth(dt.getMonth());
dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
},
ana21:function(d){
var dd = [];
dd[0] = d[0];
dd[1] = d[1];
dd[2] = d[2];
var dt = new Date(d[0],d[1],d[2]);
dt.setFullYear(dt.getFullYear());
dt.setDate(dt.getDate()-20);
dt.setMonth(dt.getMonth());
dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
}
};
$.fn.tabiwari = {
ana:function(d){
if(d.split("-").length==3){
var a = d.split("-");
console.log(a);
s = [ana_tabai.ana75(a),ana_tabai.ana55(a),ana_tabai.ana45(a),ana_tabai.ana28(a),ana_tabai.ana21(a)];
var str="";
var days = [75,55,45,28,21];
for(var i = 0;i < s.length;i++){
str += days[i] + "days ::" + s[i] + "<br>";
}
return str;
}else{
return "no!! :( ";
}
}
}
})(jQuery);
function mumu (y,m,dy,dd){
console.log(dd);
dd[0] = !m?dd[0]:y;
dd[1] = !m?dd[1]:m;
dd[2] = !m?dy:dy;
return dd;
}
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>zip358.com:ANAJSぷらぐいん</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="ana_tabiwari.js"></script>
<script>
$(function(){
$("#ana_input").change(function(){
var str = $("#ana_input").tabiwari.ana($(this).val());
$("#ana").html(str);
});
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-71682075-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<input id="ana_input" type="date">
<div id="ana">
</div>
<a href="ana_tabiwari.js" download="ana_tabiwari.js">ANA旅割JSプラグインダウンロード</a>
</body>
</html>
タグ
AM, ANA旅割JSプラグイン, B06XNQCW7B, console.log, d.split, datetimepicker, dt.getDate, dt.setDate, fn.tabiwari, function, jquery, new Date, return dt, return str, s.length, var ana_tabai, var days, var dt, var str, トイウコト,
猫でもできるjsでゴリゴリ
2017.06.10
有言実行ということで、ゴリゴリJSのサンプル書いてみました。
と言ってもサンプルなので数行だけです。
唯、これを理解すると結構便利です。使い方は人それぞれだと思いますが
簡単に言えばJSのプラグインの考え方と似ていますね。
最初の部分だけ変更すればプラグインになっちゃうからね。
トイウコトでサンプルです。
本当はボタン押しても何も動かない仕様にするつもりでした。
コンソールログから出力した値から導き出して欲しかったけど
いまどきオープンなので・・・。
サンプルサイトとソースを掲載します。
https://zip358.com/tool/ajikan_js/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>猫でもできるjsでゴリゴリ</title>
<meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../topcoat/main/fonts/stylesheet.css">
<link rel="stylesheet" type="text/css" href="../topcoat/css/topcoat-desktop-dark.css">
<link rel="stylesheet" type="text/css" href="../topcoat/main/css/main.css">
<link rel="stylesheet" type="text/css" href="../topcoat/main/css/brackets.css"><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script>
$(function(){
var ajikan = {
ajisen:function(){
var str = "味せんべい";
console.log(str);
return str;
},neko:function(){
var str = "猫が";
console.log(str);
return str;
},loop:function(obj){
var cnt = Number($(obj).val());
console.log(cnt);
return cnt;
},taberu:function(ore,str1,str2,cnt){
var o = "";
for(var i=0;i<cnt;i++){
o+=str1;
}
for(var i=0;i<cnt;i++){
o+=str2;
}
o+="たべる？";
$(ore).html(o);
return;
}
};
$("#ore").click(function(){
console.log("oioioi・・投資信託");
var e = ajikan;
e.taberu("#obj",e.neko(),e.ajisen(),e.loop("#cnt"));
});
});
</script>
</head>
<body class="dark">
<div id="wrapper">
<section class="component">
<input type="text" value="" id="cnt">
<input type="button" value="お!!" id="ore">
<div id="obj">
</div>
</section>
</div>
</body>
</html>
タグ
１, ajax.googleapis.com, AM, console.log, div id, div>, DOCTYPE html>, head>, html5shiv.googlecode.com, input type, link rel, meta http-equiv, return str, script src, script>, str1, stylesheet, title>, topcoat-desktop-dark.css, var ajikan, var str,