事件循環 · 前端筆記

## 事件循環 ```html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="keywords" content="keywords"> <meta name="description" content="description"> <link href="favicon.ico" rel="icon" type="image/x-icon"> <script type="text/javascript" src="web/res/js/jquery.1.9.1.min.js"></script> <title>Document</title> </head> <body> <script> function test(opt) { me = this; for (var _ in opt) { this[_] = opt[_]; } this.i = 0; this._uparr = [{ name: 'a', up: 0 }, { name: 'b', up: 0 }, ]; this.f = null; this.start = function() { this.up(0); }; this.up = function(o) { if (o >= this._uparr.length) { return; } if (!this._uparr[o] || this._uparr[o].up == 1) { this.up(o + 1); return; } this.i = o; this.f = this._uparr[o]; // this.upOk = function () { // }; this.upHandle(this.f); }; this.upOk = function(f) { console.log('upOk ', f, this.f, this.i); }; this.nextUp = function () { this.up(this.i + 1); }; this.ossTSTUploadBack = function (f) { console.log('ossTSTUploadBack start ... ', f, this.f, this.i); setTimeout(function() { me.upOk(me.f); me.upOk_(me.f); // 不必等到上傳成功后才上傳下一個文件，可以并發上傳 me.nextUp(); }, 20); }; this.upHandle = function(f) { console.log('upHandle start ... ', f, this.f, this.i); setTimeout(function() { me.ossTSTUploadBack(me.f); }, 20); }; this.oo = function () { for (_ in this._uparr) { this.i = _; this.f = this._uparr[_]; this.t(this.f); } }; this.t = function (f) { console.log('t ... ', f, this.f, this.i); var ff = this.f; var ff_str = JSON.stringify(ff); // setTimeout 不能記住 task 定義時的上下文，在放到 Stack 執行時，此時 task 有最新的上下文 // 除非，定義 task 時用一個單獨的變量記住此時的值，這樣等到 task 工作時，就能使用之前定義時的上下文了 // setTimeout 事件循環上下文特性和 ajax 是一樣的 setTimeout(function() { console.log('t t ... ', f, me.f, me.i, ff, ff_str); }, 20); }; } var opt = { upOk_: function (f) { console.log('upOk_ ', f, t.f, t.i); } }; var t = new test(opt); </script> </body> </html> ```