jsのpromise

jsはシングルスレッド。ひとつの流れしか実行することができない。同時に複数のスレッドを実行できない。
animateとか、ajaxとか、setTimeoutなどは、同時に複数走っているように見えるけど、別の人に仕事を振って結果を待っている。js自体はシングル。
これが非同期。

非同期処理を実行すると、jsは実行依頼を誰かに投げて自分は次の処理に移る。
アニメーションが終わってから何かを実行したいという場合にはアニメーションが終わってから実行しますよということを明示しないといけない。

promise().done(function(){}

でそれが実行できる。jQueryの場合。

jsのajaxでjsonを取得して配列にする

$.ajax({
url:”entry_code.php”,
type:”POST”,
dataType:”json”,
timespan:1000

}).done(function(data1,textStatus,jqXHR) {

en = JSON.stringify( data1 );
en = JSON.parse(en);

}).fail(function(jqXHR, textStatus, errorThrown ) {

}).always(function(){

});


en = JSON.stringify( data1 );
en = JSON.parse(en);

これがポイント。
上の奴だけだと文字列になってしまう。上のやつでjson化してparseで配列化する。

jsonを直接取りに行ける

$.ajax({
type: “POST”,
url: “chat_data.json”,
dataType: “json”
}).done(function(data, textStatus, jqXHR) {

console.log(data);

}).fail(function(jqXHR, textStatus, errorThrown) {
alert(“エラー” + errorThrown)

})

jsonファイル
[
{
“id”: 1,
“view_delay”: 1,
“html”: “

test


},
{
“id”: 2,
“view_delay”: 0,
“html”: “

こんなはずでは


}
]

帰ってきた値は、console.log(data[0]);これで取れる。

jsonをもう一度配列変数に作り直したい。

$.ajax({
type: “POST”,
url: “chat_data.json”,
dataType: “json”
}).done(function(data, textStatus, jqXHR) {

for (var k in data) {
console.log(“項目: ” + k);
console.log(“内容: ” + data[k].html);
}

}).fail(function(jqXHR, textStatus, errorThrown) {
alert(“エラー” + errorThrown)

})

アンカーリンク 高さ調整

アンカーリンクさせる時に、ヘッダーがfixedで高さを持っている場合に高さをずらす必要がある。

$(window).on(‘load resize’, function () {
var w = $(window).width();
var x = 768;
var headerHightSP = 10; //ヘッダの高さ
var headerHightPC = 180; //ヘッダの高さ
var hash = $(location).attr(‘hash’);

// スムーズスクロールの処理
var position2;
if (hash) {
if (w < x) {
//画面サイズが768px未満のときの処理
position2 = $(hash).offset().top – headerHightSP;
} else {
/*ページ外#リンク*/
position2 = $(hash).offset().top – headerHightPC;
}
}
$(“html, body”).animate({ scrollTop: position2 }, 50, “swing”);
});

ポイントは、リンククリックをトリガーにする処理ではなく、遷移先がロードされた時の処理という点。
考えてみればそうなんだけど、遷移してしまったらリンククリックをトリガーにしたアクションは実行されない。

ふたつめのポイントは、attr(‘hash’)でURLに含まれるアンカーリンクを取得できるというところ。実にシンプルに取得することができる。(#aaaの部分)
attr(‘hash’)で取得した文字列はセレクターにもなるというところも素晴らしい。

jquery ajax完了してから

jsで要素の高さを取得などするときに、その要素がajaxで読み込まれたものだと、document.readyで取得しようとしても、そのタイミングではまだajaxが完了していない。

$(document).ajaxComplete(function() {
obj_top = $(‘#table_head_time’).offset().top;//ページの読み込み完了してから位置を取得
});

ajaxCompleteは、ajaxの完了のタイミングで動く。
複数のajaxが動いた場合は、その度にここが実行されるのだと思う。

slick スライダーのjQuery

wpに入れるときは、jsを読み込ませまして、下の方に

これを書いておく。
ーーー
モバイルで右側にはみ出すものがありますが、それは矢印です。
.slick-slider .slick-next {
right: 15px;
}
ーーー

ajaxで追加した要素にイベント

ajaxで追加した要素は、js読み込みの時点では存在していないので、後から追加する要素にイベント(クリックなど)を設定することができない。
#table_areaの中身をajaxで追加するとして、そのテーブルの中のtdにイベントを設定したい場合。

これでは動かない。tdがないから。
$(“td”).on(‘click’, function() {

こうする
$(“#table_area”).on(‘click’,’td’, function() {

#table_areaは最初から存在するものとする。
onの関数の二つ目の引数に、トリガーとなる要素を設定するのです。

複数のトリガーがある場合はこんな感じ。
$(“#table_area”).on({
‘mouseenter’: function() {
if(!$(‘#toggleCancelBtn’).prop(‘checked’)){
if ($(this).text() === “” && !$(this).hasClass(‘rsvFlag’)) {
$(this).addClass(‘hoverFlag’);
}
}else{
if ($(this).hasClass(‘myReserve’)) {
$(this).addClass(‘hoverFlag’);
}
}
},
‘mouseleave’: function() {
if(!$(‘#toggleCancelBtn’).prop(‘checked’)){
if ($(this).text() === “” && !$(this).hasClass(‘rsvFlag’)) {
$(this).removeClass(‘hoverFlag’);
}
}else{
if ($(this).hasClass(‘myReserve’)) {
$(this).removeClass(‘hoverFlag’);
}
}
},
},”td”);

【ローカルDB】 Loacal Strage,Indexed DB,store.js

ブラウザにデータを保存する。
クッキーは数キロバイトしか保存できないのに対して、Local Storageは数メガバイト保存することができる。

そのままでは、keyとvalueしか保存できないので、オブジェクトを保存できるようにしたプラグインがstore.js。
これはjsonでデータを渡すと、中で何か上手いことやってくれてオブジェクトで取り出せるようになるという優れもの。

IndexedDBは、それをさらにSQLっぽく使える。インデックスを貼ってくれるとか。検索ができるようになるとか。

masonry

jQuery(function($){

$(window).on(‘load’, function() {

$(‘.grid’).masonry({
// options
itemSelector: ‘.grid-item’,
columnWidth: ‘.grid-item’,
stagger: 30
});
});

});

画像の読み込みが終わってから動かさないと、外側の縦幅の計算がうまくいかない。
親要素のクラスに「grid」、子要素のクラスに「grid-item」(上のサンプルだとそうなる)と設定すること。

http://cly7796.net/wp/javascript/started-with-masonry/