これはjavascriptイベントの仕事だと思います。基本的に、マウスを動かすと更新されるグローバル変数があります。変数を更新した後、変数を処理する準備ができていることを他のコンポーネントに通知する必要があります。
コード:
var myVar; // the global variable
// the function that will be caled when myVar has been changed
var myVarChangedHandler = function() {
console.log('myVar variable has been changed: ' + myVar);
}
// bind the event to the above event handler
$('body').bind('MyVarChangedEvent', myVarChangedHandler);
// instal mouse move event handler on document
$(document).mousemove(function(e){
myVar = winHeight() + scrollY() - e.pageY;
$('body').trigger('MyVarChangedEvent');
});
アップデート
var
movemoveイベントハンドラーからキーワードを削除しました。
myVarに依存するコードをmyVarChangedHandler
関数に配置する必要があります。
私はあなたのコード、その欠陥、そしてアナロジーを使って問題をどのように解決すべきかを説明しようと思います。次のコードを取りましょう(グローバル変数が修正されました)
var myvar;
$(document).mousemove(function(e){
myvar = winHeight() + scrollY() - e.pageY;
});
console.log(myvar);
プログラマーであるあなたが、名前のない会社のWeb開発部門のチームリーダーであり、1日の作業で実行するタスクのリストがあるとします(私たちのアナロジーのタスクはmyvar
、マウスが動くたびに更新することです)。リポジトリ(var myvar
)と2人の開発者を自由に使用できます。
- 開発者ジョン(
function(e) { myVar = ... };
)
- 開発者ケン(
console.log(myvar)
)
09:00午前中にオフィスに来ます(ユーザーがページを開きます)
09:05サーバー/リポジトリの電源を入れます
var myvar;
09:10ジョンに伝えます:ジョン、このタスクを実行してください。各タスクを完了するたびに、リポジトリにアップロードし、時間が終わったら家に帰ってください。
$(document).mousemove(function(e){
myvar = winHeight() + scrollY() - e.pageY;
});
09:11ケンに伝えます:ケン、今すぐリポジトリのコードをテストし、テストが終了したら家に帰ってください
console.log(myvar);
(この時点で、Kenはリポジトリが空であることがわかり、家に帰ります。これは、Johnが1分以内にタスクを解決する時間がなかったため、Kenがテストするものがないためです)
09:12あなたは家に帰ります
09:12にオフィスにいるのはジョンだけで、他に何もすることがないので、あなたとケンは家を出ました。これはコードにも起こります。の値を出力しますがmyvar
、マウスを動かしていないので、もちろん、値はundefined
これを解決するために、いくつかの変更を追加します。
09:00あなたは朝オフィスに来ます
09:05サーバー(リポジトリ)の電源を入れます
09:10あなたはジョンに言います:
John, please do this tasks and everytime you complete each task
uploaded it to the repository and tell Ken to test the code.
Go home after you have finished
09:11あなたはケンに言います:
Ken, each time John tells you that he has completed a task,
fetch the code from the repository and test it.
Go home after he has finished
09:12あなたは家に帰ります
09:12に、ジョンとケンの両方がオフィスで仕事をしています。
上記の場合、ケンはmyVarChangedHandler = function() {...};
ジョンがタスクを完了したことをケンに伝えると、実際のイベントが発生します(伝える)。ケンがジョンの合図を認めると、テストを開始します(ケンはイベントハンドラーです)。
これは、JavaScriptのイベント駆動型アーキテクチャがどのように機能するかです。jqueryやmootoolsなどを捨てて、コアの概念と基本を学び始めることをお勧めします。ホイールを数回再発明してから、jqueryに戻ります。私はあなたが理解できるように十分に説明したことを望みます。