Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah kaedah operasi tak segerak dalam javascript?
Kaedah operasi tak segerak bagi JavaScript termasuk: 1. Fungsi panggilan balik; 3. Mod "Terbitkan/Langganan"; 5. Penjana;
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.
Mod tak segerak tidak sukar untuk difahami Contohnya, tugasan A, B, C, laksanakan A dan kemudian laksanakan B, tetapi B ialah kerja yang memakan masa, jadi letakkan B dalam baris gilir tugas dan laksanakan. C. Kemudian selepas beberapa I/O B mengembalikan keputusan, B dilaksanakan Ini adalah operasi tak segerak.
Persekitaran pelaksanaan bahasa JavaScript adalah "benang tunggal". Apa yang dipanggil berbenang tunggal bermaksud bahawa hanya satu tugasan boleh diselesaikan pada satu-satu masa, jika terdapat berbilang tugasan, ia perlu dibariskan. Setelah satu selesai, teruskan ke yang seterusnya dengan Cara ini Ia sangat mudah dari segi pelaksanaan, tetapi jika sesuatu tugasan mengambil masa yang lama, maka tugasan berikutnya perlu beratur, yang akan melambatkan pelaksanaan. keseluruhan program. pelayar biasa tidak bertindak balas (kematian digantung) adalah kerana sekeping kod JavaScript tertentu berjalan untuk masa yang lama (seperti gelung tak terhingga), menyebabkan seluruh halaman menjadi beku dan tugas lain tidak dapat dilaksanakan.
Untuk menyelesaikan masalah ini, bahasa JavaScript membahagikan mod pelaksanaan tugas kepada dua jenis: Segerak dan Asynchronous.
Susunan tugas segerak dilaksanakan adalah konsisten dengan susunan tugasan itu dibariskan, manakala tugas tak segerak memerlukan satu atau lebih fungsi panggil balik Selepas sebelumnya tugas tamat, tidak Daripada melaksanakan tugas seterusnya , fungsi panggil balik dilaksanakan selepas menunggu selesai tugasan sebelumnya tugasan dan tidak segerak.
Mod tak segerak adalah sangat penting Di sisi penyemak imbas, operasi lama harus dilaksanakan secara tidak segerak untuk mengelakkan pelayar kehilangan respons Contoh terbaik ialah operasi ajax, dalam Di sisi pelayan, operasi tak segerak adalah satu-satunya cara, kerana persekitaran pelaksanaan adalah berbenang tunggal Jika semua permintaan http dibenarkan untuk dilaksanakan secara serentak, prestasi pelayan akan menurun secara mendadak dan ia akan kehilangan tindak balas.
Kaedah pengaturcaraan tak segerak dalam JavaScript ialah:
Sekarang izinkan saya memperkenalkan kaedah tak segerak ini masing-masing:
Fungsi panggil balik ialah kaedah paling asas dalam pengaturcaraan tak segerak . Katakan terdapat tiga fungsi f1, f2, f3 , f2 perlu menunggu hasil pelaksanaan f1 , dan f3 adalah bebas dan tidak memerlukan keputusan f1 dan f2 , jika kita menulisnya secara serentak, ia adalah seperti ini:
f1(); f2(); f3();
Jika f1 dilaksanakan dengan cepat, ia adalah OK; tetapi jika f1 dilaksanakan dengan sangat perlahan, maka f2 dan f3 akan disekat dan tidak boleh dilaksanakan. Kecekapan ini sangat rendah. Tetapi kita boleh menulis semula dan menulis f2 sebagai fungsi panggil balik f1, seperti berikut:
function f1(callback){ setTimeout(function () { // f1的任务代码 callback(); }, 1000); }
Kemudian kod pelaksanaan pada masa ini akan menjadi seperti ini:
f1(f2); f3();
Seperti ini, Ia adalah pelaksanaan tak segerak Walaupun f1 sangat memakan masa, kerana ia tidak segerak, f3() akan dilaksanakan dengan cepat tanpa terjejas oleh f1 dan f2.
Nota: Bagaimana jika kita menulis f1 seperti ini?
function f1(callback){ // f1的任务代码 callback(); }
Kemudian, kita juga boleh memanggil seperti ini:
f1(f2); f3()
Adakah ia masih tak segerak pada masa ini? Jawapan: Bukan tak segerak. Fungsi panggil balik di sini bukan fungsi panggil balik sebenar Jika fungsi setTimeout tidak digunakan, pelaksanaan f3() juga perlu menunggu sehingga f1(f2) dilaksanakan sepenuhnya Berhati-hati di sini . Dan kami menggunakan setTImeout untuk membuat fungsi panggil balik sebenar.
Idea tak segerak lain ialah menggunakan mod dipacu peristiwa. Pelaksanaan tugas tidak bergantung pada susunan kod, tetapi pada sama ada peristiwa berlaku. Mari kita ambil f1, f2, dan f3 sebagai contoh. Pertama, mengikat acara ke f1 (jquery digunakan di sini):
f1.on('done', f2); f3()
Maksudnya: Apabila acara selesai berlaku dalam f1, f2 dilaksanakan Kemudian, kita Tulis Semula f1:
function f1(){ setTimeout(function () { // f1的任务代码 f1.trigger('done'); }, 1000); }
f1.trigger('done') bermaksud selepas perlaksanaan selesai, acara yang dilakukan akan dicetuskan serta-merta untuk mula melaksanakan f2.
Kelebihan kaedah ini ialah ia lebih mudah difahami, ia boleh mengikat berbilang peristiwa, setiap peristiwa boleh menentukan berbilang fungsi panggil balik, dan ia boleh dipisahkan, yang kondusif untuk modularisasi , kelemahannya ialah keseluruhan program harus dipacu peristiwa, dan proses berjalan akan menjadi sangat tidak jelas.
第二种方法的事件,实际上我们完全可以理解为“信号”,即f1完成之后,触发了一个 'done',信号,然后再开始执行f2。
我们假定,存在一个“信号中心”,某个任务执行完成,就向信号中心“发布”(publish)一个信号,其他任务可以向信号中心“订阅”这个信号, 从而知道什么时候自己可以开始执行。 这个就叫做“发布/订阅模式”, 又称为“观察者”模式 。
这个模式有多种实现, 下面采用Ben Alman的Tiny PUb/Sub,这是jQuery的一个插件。
首先,f2向"信号中心"jquery订阅"done"信号,
jQuery.subscribe("done", f2);
然后,f1进行如下改写:
function f1(){ setTimeout(function () { // f1的任务代码 jQuery.publish("done"); }, 1000); }
jquery.pushlish("done")的意思是: f1执行完成后,向“信号中心”jQuery发布“done”信号,从而引发f2的执行。
此外,f2完成执行后,也可以取消订阅(unsubscribe)。
jQuery.unsubscribe("done", f2);
这种方法的性质和“事件监听”非常类似,但是明显是优于前者的,因为我们可以通过查看“消息中心”,了解到存在多少信号、每个信号有多少个订阅者,从而监控程序的运行。
promise是commonjs工作组提出来的一种规范,目的是为异步编程提供统一接口。
简答的说,它的思想是每一个异步任务返回一个promise对象,该对象有一个then方法,允许指定回调函数。 比如,f1的回调函数f2,可以写成:
f1().then(f2);
f1要进行下面的改写(这里使用jQuery的实现):
function f1(){ var dfd = $.Deferred(); setTimeout(function () { // f1的任务代码 dfd.resolve(); }, 500); return dfd.promise; }
这样的优点在于,回调函数编程了链式写法,程序的流程可以看得很清楚,而且有一整套的配套方法,可以实现很多强大的功能 。
如:指定多个回调函数:
f1().then(f2).then(f3);
再比如,指定发生错误时的回调函数:
f1().then(f2).fail(f3);
而且,他还有一个前面三种方法都没有的好处:如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。 所以,你不用担心是否错过了某个事件或者信号,这种方法的确定就是编写和理解,都比较困难。
在ES6诞生之前,异步编程的方法,大致有下面四种:
没错,这就是上面讲得几种异步方法。 而generator函数将JavaScript异步编程带入了一个全新的阶段!
比如,有一个任务是读取文件进行处理,任务的第一段是向操作系统发出请求,要求读取文件。然后,程序执行其他任务,等到操作系统返回文件,再接着执行任务的第二段(处理文件)。这种不连续的执行,就叫做异步。
相应地,连续的执行就叫做同步。由于是连续执行,不能插入其他任务,所以操作系统从硬盘读取文件的这段时间,程序只能干等着。
协程
传统的编程语言中,早就有了异步编程的解决方案,其中一种叫做协程,意思是多个线程互相协作,完成异步任务。
协程优点像函数,又有点像线程,运行流程如下:
A
开始执行。A
执行到一半,进入暂停,执行权转移到协程B
。B
交还执行权。A
恢复执行。上面的协程A,就是异步任务,因为它分为两段(或者多段)执行。
举例来说,读取文件的协程写法如下:
function *asyncJob() { // ...其他代码 var f = yield readFile(fileA); // ...其他代码 }
上面代码的函数asyncJob是一个协程,奥妙就在于yield命令, 它表示执行到此处,执行权交给其他协程,也就是说yield命令是异步两个阶段的分界线。
协程遇到yield命令就暂停,等到执行权返回,再从暂停的地方继续向后执行,它的最大优点就是代码的写法非常像同步操作,如果去除yield命令,简直是一模一样。
协程的Generator函数实现
Generator函数是协程在ES6中的实现,最大特点就是可以交出函数的执行权(即暂停执行)。
整个Generator函数就是一个封装的异步任务,或者说异步任务的容器。 异步任务需要暂停的地方,都用yield语句注明。 如下:
function* gen(x) { var y = yield x + 2; return y; } var g = gen(1); g.next() // { value: 3, done: false } g.next() // { value: undefined, done: true }
在调用gen函数时 gen(1), 会返回一个内部指针(即遍历器)g。 这是Generator函数不同于普通函数的另一个地方,即执行它(调用函数)不会返回结果, 返回的一个指针对象 。调用指针g的next方法,会移动内部指针(即执行异步任务的第一阶段),指向第一个遇到的yield语句,这里我们是x + 2,但是实际上这里只是举例,实际上 x + 2 这句应该是一个异步操作,比如ajax请求。 换言之,next方法的作用是分阶段执行Generator函数。每次调用next方法,会返回一个对象,表示当前阶段的信息(value属性和done属性)。 value属性是yield语句后面表达式的值,表示当前阶段的值;done属性是一个布尔值,表示Generator函数是否执行完毕,即是否还有下一个阶段。
Generator函数的数据交换和错误处理
Generator 函数可以暂停执行和恢复执行,这是它能封装异步任务的根本原因。除此之外,它还有两个特性,使它可以作为异步编程的完整解决方案:函数体内外的数据交换和错误处理机制。
next
返回值的value属性,是 Generator 函数向外输出数据;next
方法还可以接受参数,向 Generator 函数体内输入数据。
function* gen(x){ var y = yield x + 2; return y; } var g = gen(1); g.next() // { value: 3, done: false } g.next(2) // { value: 2, done: true }
上面代码中,第一next
方法的value
属性,返回表达式x + 2
的值3
。第二个next
方法带有参数2
,这个参数可以传入 Generator 函数,作为上个阶段异步任务的返回结果,被函数体内的变量y
接收。因此,这一步的value
属性,返回的就是2
(变量y
的值)。
Generator 函数内部还可以部署错误处理代码,捕获函数体外抛出的错误。
function* gen(x){ try { var y = yield x + 2; } catch (e){ console.log(e); } return y; } var g = gen(1); g.next(); g.throw('出错了'); // 出错了
上面代码的最后一行,Generator 函数体外,使用指针对象的throw
方法抛出的错误,可以被函数体内的try...catch
代码块捕获。这意味着,出错的代码与处理错误的代码,实现了时间和空间上的分离,这对于异步编程无疑是很重要的。
异步任务的封装
下面看看如何使用 Generator 函数,执行一个真实的异步任务。
var fetch = require('node-fetch'); function* gen(){ var url = 'https://api.github.com/users/github'; var result = yield fetch(url); console.log(result.bio); }
上面代码中,Generator 函数封装了一个异步操作,该操作先读取一个远程接口,然后从 JSON 格式的数据解析信息。就像前面说过的,这段代码非常像同步操作,除了加上了yield
命令。
执行这段代码的方法如下。
var g = gen(); var result = g.next(); result.value.then(function(data){ return data.json(); }).then(function(data){ g.next(data); });
上面代码中,首先执行 Generator 函数,获取遍历器对象,然后使用next
方法(第二行),执行异步任务的第一阶段。由于Fetch
模块返回的是一个 Promise 对象,因此要用then
方法调用下一个next
方法。
可以看到,虽然 Generator 函数将异步操作表示得很简洁,但是流程管理却不方便(即何时执行第一阶段、何时执行第二阶段)。
如下:
function* gen(x) { yield 1; yield 2; yield 3; return 4; } var a = gen(); console.log(a.next()); console.log(a.next()); console.log(a.next()); console.log(a.next());
最终,打印台输出
即开始调用gen(),并没有真正的调用,而是返回了一个生成器对象,a.next()的时候,执行第一个yield,并立刻暂停执行,交出了控制权; 接着,我们就可以去a.next() 开始恢复执行。。。 如此循环往复。
每当调用生成器对象的next的方法时,就会运行到下一个yield表达式。 之所以称这里的gen()为生成器函数,是因为区别如下:
async函数基于Generator又做了几点改进:
很多人都认为这是异步编程的终极解决方案,由此评价就可知道该方法有多优秀了。它基于Promise使用async/await来优化then链的调用,其实也是Generator函数的语法糖。 async 会将其后的函数(函数表达式或 Lambda)的返回值封装成一个 Promise 对象,而 await 会等待这个 Promise 完成,并将其 resolve 的结果返回出来。
await得到的就是返回值,其内部已经执行promise中resolve方法,然后将结果返回。使用async/await的方式写回调任务:
async function dolt(){ console.time('dolt'); const time1=300; const time2=await step1(time1); const time3=await step2(time2); const result=await step3(time3); console.log(`result is ${result}`); console.timeEnd('dolt'); } dolt();
可以看到,在使用await关键字所在的函数一定要是async关键字修饰的。
功能还很新,属于ES7的语法,但使用Babel插件可以很好的转义。另外await只能用在async函数中,否则会报错。
【相关推荐:javascript学习教程】
Atas ialah kandungan terperinci Apakah kaedah operasi tak segerak dalam javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!