20160930 フロントエンド高速化 業務編 (社内勉強会)バックアップと障害復旧から考えるOracle Database, MySQL, PostgreSQLの違い
$.Deferredを使って、一定間隔でスリープしながらループする - Rails etc... Memo
まずはSleepメソッドを自作する。 function Sleep(msec) { var d = $.Deferred(); setTimeout(function() { d.resolve(); }, msec); return d.promise(); }繰り返したい処理の本体の実装。こちらも、Deferredを返すようにしておく。 function MyFunc(cnt) { var d = $.Deferred(); $("#divProgress").append("<p>in MyFunc() " + cnt + "</p>"); d.resolve(); return d.promise(); };で、これをループで呼ぶ。ここでは10回呼ぶようにしてみる。 function() { var counter = [1,2,3,4,5,6,7,8,9,10]; var d =
jQuery.Defferredを使ったdone無限ループとSleepで簡単ポーリング - それマグで！
jQuery.Defferredを使うと、イベントキューを管理しなくても、メソッドに書けばよくなって便利になる。 sleep関数を実装する。 定番のSleepを実装する var wait_time = function(time){ return (function(){ var dfd = $.Deferred() setTimeout(function(){ console.log("resolve#wait_time("+time+") ");dfd.resolve(); }, time); return dfd.promise() }) } sleep 起動 var sleep = wait_time(200) $.when(sleep) .then(wait_time(200)) .then(wait_time(201)) .then(wait_time(202)) .done(
JavaScriptのオブジェクトをコピーする - @ledsun blog
API Only - Stack Exchangeに詳しい解説があったので翻訳する。 質問 オブジェクトxをオブジェクトyにコピーしたい。yを変更してもxが変更されないようにだ。JavaScriptで、最もエレガントな方法は？ 追記: JavaScriptの組み込みオブジェクトをコピーすると不要なプロパティをコピーしてしまうことは理解している。今回は問題にならない。リテラルで生成した自前のオブジェクトを対象にするからだ。 回答 JavaScriptには、あらゆるオブジェクトをコピーできるシンプルで統一的な方法ありません。まず、リンクしたプロトタイプオブジェクトから属性を取得してしまう問題があります。プロトタイプオブジェクトの属性は、新しいインスタンスにコピーすべきはありません。Object.prototypeにcloneメソッドを追加するのであれば、プロトタイプオブジェクトの属性を明示的に
JavaScriptのオブジェクトを扱うとき、=はただの値渡しではない - woshidan's blog
2015-01-29 検索で上の方にいたみたいなので、指摘でいただいている修正を下の方に書くのじゃなくて、上の方から直しました。 修正前の記事はこちらから。 JavaScriptのオブジェクトを扱うとき、=は値渡しではない - woshidan's loose leaf 今日の昼間、ちょちょいのちょいだぜー、と思っていた処理の実装がこれが原因で30分以上詰んだので、切なくなったから書く。 参考にしたのはここらへん。 JavaScript でオブジェクトや配列をコピーする方法 | monopocket.jp JavaScript のオブジェクトは参照渡しで代入される | monopocket.jp シャローコピーとディープコピーの違い - くろの雑記帳 javascript - What is the most efficient way to clone an object? - Stac
javascriptとは？知っておきたい基礎知識 - プログラミング学習の窓口
JavaScriptは、htmlとcssで構成したページの動きを操作出来ます。分かりやすい例としては、ボタンやメニューの動き。こういったものもJavaScriptを活用することで実現が出来ます。 Javascriptは非常に人気の高い言語で、JAVAとにていますが別ものです。 ReactのようなJavascriptを応用した技術も普及が進んでおり、今後当分は主流な言語として活用されるでしょう。 The post javascriptとは？知っておきたい基礎知識 first appeared on プログラミング学習の窓口.
jQueryのfind()を利用した高速化
jQueryのfind()を利用した高速化 最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込めるものの、多くのケースでは低速化されてしまいます。 また、以下の様なパターンも見かけました。 var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); こちらも、
ちょっと未来のJavaScript - Thujikun blog
本エントリは JavaScript Advent Calendar 201314日目となります。 来年遂にXPが逝去されるということで、IE9以降のシェアが飛躍的に伸びることを祈りつつ、IE9以降でJavaScriptでできるようになることを気がつく限りまとめてみました。 DOM addEventListener / removeEventListener イベントを登録/削除するためのメソッド。IE8まではattachEventとdetachEventという似たような、でも割と細かいところで動きが違うメソッドを使う必要があったが、IE9から標準のaddEventListenerがサポートされている。 ※ jQueryのon/offとかbind/unbindとだいたい同じ。 ※ 第3引数はuseCaptureといって、trueにするとイベント伝播を上位のDOMから発生させることができる。ま
javascript jQuery スクロールバーの幅を含むウィンドウサイズを取得したい。 - かもメモ
.width()で取得できる。 var width = $(window).width(); $(window).width();で取得できる値は表示されているエリアのサイズになります。 Y方向にスクロールがあるページの時、これで取れるwidthにはスクロールバーの幅は含まれないっぽいです。 レスポンシブなサイトなどで、サイズに合わせて$(window).on('resize')などで処理を行う時にスクロールバーの幅を含む／含まないでCSS3のMedia Queries(メディアクエリ)で指定しているwidthとjavascriptの処理がズレてしまう場合があります。 スクロールバーの幅も含んだウィンドウサイズを取得 (ブラウザとバージョンによって微妙に異なるかも知れません... var width = window.innerWidth || document.documentEleme
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
jQueryのeachを逆順に処理 - メモ置き場
jQueryのセレクタで取得した要素をいったんgetで普通の配列にして、jsのreverseで逆順にした後、jQueryのオブジェクトに戻す <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function(){ $($("li").get().reverse()).each(function() { console.log($(this).text()); }); }); </script> </head> <body> <ul> <li>text 1</li> <li>text 2</li> <li>text 3</li> </ul> </body> </html> console.log
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
これだけは抑えておきたい！ jQuery や CSS の「イージング」の基礎知識
この"easeInQuad"にあたる部分が、イージングです！ イージングを設定することで、動きに、勢いや波をつけることができます。 イージングを設定して、ボールを左右に動かしたものがこちら！ ちなみに、イージングがないとこんな感じです。 イージングを使いこなそう！ イージングは結構、種類が多いです。 例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています！ でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか？ 今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、 それぞれのイージングの特徴と、使いどころを紹介します！ ちょっと、注意事項 CSSや、jQueryでのアニメーションのやり方 今回はアニメーションのやり方そのものについては、説明を省き、イージングの話を中心に書きます。
jQuery の .end() メソッドが便利ですよ | JavaScript | かたつむりくんのWWW
たぶん jQuery を使い始めたばかりの人はあまり使わないであろう .end() メソッドですが、これ、かなり便利なんですよね。 僕も最初はあまり使っていませんでしたが、最近は積極的に使っています。ソースも短くかけるうえに、パフォーマンス的にも良いので是非使っていきたいメソッドです。 今回は、簡単な例で .end() を紹介してみます。 今、次のようなソースがあるとします。アコーディオンさせる場所などで良く見そうなソースです。 <dl id="hoge"> <dt>.end()を使う</dt> <dd> <ul> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list 4</li> <li>list 5</li> </ul> </dd> </dl> このような html に対して、次のような操作を行いたいとします。 dt 内のテキ
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
jQuery を高速に使う CSS セレクタの書き方
jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。 ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。 何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある ※ この記事は jQuery 1.2.6 のソースコードを元に記述しています 1. 何度も同じセレクタを実行しない 改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){alert
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
wrap()関連まとめ - Qiita
Border