スキップしてメイン コンテンツに移動

[JavaScript]プロトタイプ定義したメソッド内でsetTimeoutを使って自身を呼び 出す方法

コメント欄で思いがけず見つけたので、メモ。

prototype定義したメソッド内でsetTimeoutで自身を呼び出す方法

・JavaScript’s setTimeout and how to use it with your methods » Klevo blog
http://klevo.sk/javascript/javascripts-settimeout-and-how-to-use-it-with-your-methods/

If you are using the prototype javascript, you can take advantage of its general purpose early-binding function, bind (see http://alternateidea.com/blog/articles/2007/7/18/javascript-scope-and-binding).
The solution using prototype’s bind function is:

setTimeout(this.methodToCall.bind(this), time);

上記赤文字の通りに使えば良いのですが、メソッド自身を繰り返し呼んでブラウザに時計のように表示するサンプルを以下に。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>BrowserTimer</title>
<meta name="author" content="takaiwa29" />

<script type="text/javascript">
var BrowserTimer = function() {}
BrowserTimer.prototype = {
timerMethod: function () {
// 現在時刻を取得
var nowtime = new Date();

var display = document.getElementById("display");
// 現在時刻を表示
display.innerHTML = nowtime.toString();

// 1秒後に同メソッドを呼ぶ
setTimeout(this.timerMethod.bind(this),1000);
}
}

function init() {
var hoge = new BrowserTimer();
hoge.timerMethod();
}
</script>
</head>
<body onLoad="init()">
<!-- タイマー表示場所 -->
<div id="display"></div>
</body>
</html>


実行結果はこんな感じ



 



WS000408

コメント

このブログの人気の投稿

GolangでWindows GUIアプリケーション

GUIアプリ作成の前提 社内ツールとしてexeで配布 開発環境はGoLandを使う 社内ツールとしてexeを配布ということであれば、Visual StudioでC#による開発だと思います。しかしながら、Go言語を習得したいのと、GoLandの補完機能が便利で、Android Studio使っていたこともあり、とっつきやすいという点からGo縛りでGUIアプリケーションを考えたいと思います。 lxn/walk Windows application library kit for Go. Windows向けしか考えていないので、まずこのライブラリなのですが、ボタンやコンボボックスが思ったように並ばなかったり、手軽にイメージボタンを配置したりなど、簡単にレイアウトを変更できない課題に直面しました。レイアウト作成だけで時間を取られてしまいます。そう言えば、Androidアプリ開発のときは、XMLでデザイン部分を切り離してたのを思い出して、今回の調査の運びとなりました。 fyne-io/fyne Cross platform native GUIs designed for Go based on Material Design. Supports: Linux, macOS, Windows, BSD, iOS and Android. walkと比べると、クロスプラットフォームで作成できるのですが、こちらもコードの中にデザインを書いていく形でした。 therecipe/qt therecipe/qt allows you to write Qt applications entirely in Go or JavaScript. Qt Creatorなるものがあるようで、デザイン部分を切り離せる印象はあるものの、最新のPCでもビルドに時間がかかるようで、学習コストもかかるという記事を見かけて断念しました。 どうしたものかとツイートしましたら、下記のようにご助言をいただいた。 同じ課題に対し色々試した結果、PWAのフルキャッシュドに落ち着いた。中身はGo+WASMで。 https://t.co/e60whDTV16 — のぼのぼ📡 (@nobonobo) July 21, 2020 PWA 早速調べてみました。Googleが進めているプロジェクトで、ネイティブアプリのよ

Eclipseの高速化メモ

Eclipseが重いと一言に言っても、いろいろな工程での話があると思いますが、過去記事のなども含めてこの記事にピックアップしておきたいと思います。以下はWindows環境での話です。

Eclipseで一通り基本的なGitを使ってみる

備忘録的にまとめておきたいと思います。おかしな点があればご指摘いただければ幸いです。 目次 環境 プロジェクト作成~初コミットまで コミットの履歴&差分を見る 元に戻す ブランチについて ブランチを作成してみる ブランチを統合するには マージする Rebaseする ローカルリポジトリからプロジェクトを取り込む コミットしたメッセージの修正 環境 Eclipse IDE for Java Developers:Juno Service Release 1 Git:上記Eclipseのプリインストール版