Pengenalan kepada JavaScript: Kaedah asyncAdd penambahan tak segerak tulisan tangan

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript terutamanya dengan penjelasan terperinci tentang kaedah tambah asyncAdd tulisan tangan Rakan yang memerlukan Mari kita lihat bersama-sama ia membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Kata Pengantar

Saya temui soalan yang ringkas tetapi menarik mengenai Nuggets Tajuknya adalah seperti berikut:

// 异步加法
function asyncAdd(a,b,cb){
  setTimeout(() => {
    cb(null, a + b)
  }, Math.random() * 1000)
}
async function total(){
  const res1 = await sum(1,2,3,4,5,6,4)
  const res2 = await sum(1,2,3,4,5,6,4)
  return [res1, res2]
}
total()
// 实现下 sum 函数。注意不能使用加法，在 sum 中借助 asyncAdd 完成加法。尽可能的优化这个方法的时间。
function sum(){
}

Anda boleh cuba melaksanakannya secara langsung dan menguji pemikiran dan JavaScript pengetahuan asas anda hubungi saya?

Saya rasa kebanyakan orang tidak tahu apa soalan ini pada pandangan pertama (tiada siapa yang akan mengenali saya jika saya tidak memberitahu anda), tetapi selepas membacanya untuk kali kedua, saya rasa mereka hampir faham tentang kandungan apa yang perlu disiasat? ! !

Analisis asyncAdd

Berikut ialah kesimpulan akhir:

• hanya boleh mengubah suai kandungan bahagian sum, sum boleh menerima parameter mana-mana panjang
• sum hanya boleh melaksanakan pengiraan penambahan melalui asyncAdd yang perlu mengendalikan logik tak segerak dan perlu menggunakan
• sum yang perlu. optimumkan kaedah Promise Masa pengiraan
• sumBerikut ialah maklumat berkaitan yang diperoleh dengan menganalisis bahagian kod yang berlainan.

Cara yang paling intuitif ialah melalui bahagian penerangan teks di atas, anda boleh mengetahui dengan mudah keperluan khusus soalan:

// 实现下 sum 函数。注意不能使用加法，在 sum 中借助 asyncAdd 完成加法。尽可能的优化这个方法的时间。 
function sum(){ }

Fungsi Pencapaian

• sum tidak boleh terus menggunakan penambahan ( ), dan melaksanakan penambahan melalui sum
• mengoptimumkan pengiraan masa kaedah asyncAdd
• sumMata pemeriksaan tersembunyi - setTimeout & cb

Dari kandungan di atas, yang paling jelas ialah

// 异步加法
function asyncAdd(a, b, cb){
  setTimeout(() => {
    cb(null, a + b)
  }, Math.random() * 1000)
}

digunakan dalam 🎜> dan hasil pengiraan hanya boleh dikembalikan melalui fungsi panggil balik setTimeout Jadi apakah yang diwakili oleh parameter pertama cb? asyncAddsetTimeout sebenarnya boleh dianggap sebagai objek mesej ralat Jika anda mengetahui lebih lanjut tentang cb, anda akan mengetahui bahawa parameter pertama fungsi panggil balik pemprosesan tak segerak dalam null biasanya objek ralat, yang digunakan. untuk Menghantarnya ke luar untuk menyesuaikan logik pelaksanaan berikutnya apabila ralat berlaku, dsb.

Satu ayat: node Fungsi akan menerima objek ralat dan hasil pengiraan sebagai parameter dan menghantarnya ke luar. node

cb

mestilah dari jenis

async function total(){
  const res1 = await sum(1,2,3,4,5,6,4)
  const res2 = await sum(1,2,3,4,5,6,4)
  return [res1, res2]
}

sumSelain itu, nilai pulangan fungsi promise juga mestilah jenis await sum(...), kerana keseluruhan fungsi

fungsi tak segerak Anda boleh klik di sini untuk melihat butirannya. totalpromise Dalam satu ayat: total perlu mengembalikan nilai jenis async, iaitu

, dan daripada sum kita tahu bahawa promise boleh menerima parameter sebarang panjang. sumpromiseLaksanakan asyncAddsum(1,2,3,4,5,6,4)sumPelaksanaan khusus

Idea pelaksanaan adalah seperti berikut:

dan merangkumnya sebagai pelaksanaan
• , iaitu fungsi
• asyncAdd mengambil kira bahawa Promise sebenarnya hanya boleh diterima sekali Untuk mengira dua nombor, gunakan gelung untuk menghantar berbilang parameter ke dalam caculate
Memandangkan susunan operasi tak segerak yang diproses melalui gelung, gunakan
• untuk memastikan susunan pelaksanaan yang betul, dan fungsi asyncAdd Nilai pulangan betul-betul memenuhi keperluan
menjadi jenis
• async/awaitasyncsumKod khusus adalah seperti berikut: Promise

// 通过 ES6 的剩余运算符（...） 接收外部传入长度不固定的参数
async function sum(...nums: number[]) {
    // 封装 Promise 
    function caculate(num1: number, num2: number) {
        return new Promise((resolve, reject) => {
            // 调用 asyncAdd 实现加法
            asyncAdd(num1, num2, (err: any, rs: number) => {
                // 处理错误逻辑
                if (err) {
                    reject(err);
                    return;
                }
                // 向外部传递对应的计算结果
                resolve(rs);
            });
        })
    }
    let res: any = 0;
    // 通过遍历将参数一个个进行计算
    for (const n of nums) {
        // 为了避免异步执行顺序问题，使用 await 等待执行结果 
        res = await caculate(res, n);
    }
    return res;
}

Fungsi boleh diekstrak ke lapisan luar fungsi

• caculate Fungsi panggil balik fungsi tidak perlu diekstrak kerana ia bergantung pada terlalu banyak parameter dan kaedah luaran Berbilang sum
• asyncAddhasil pengiraan cache

function caculate(num1: number, num2: number) {
    return new Promise((resolve, reject) => {
        asyncAdd(num1, num2, (err: any, rs: number) => {
            if (err) {
                reject(err);
                return;
            }
            resolve(rs);
        });
    })
}
async function sum(...nums: number[]) {
    let res: any = 0;
    for (const n of nums) {
        res = await caculate(res, n);
    }
    return res;
}

dipanggil dua kali, dan parameter adalah betul-betul sama Tujuannya adalah untuk mengingatkan anda Kali kedua kandungan yang sama dikira hasilnya diambil terus daripada cache dan bukannya menjadi dikira secara tak segerak.

totalYang berikut hanyalah pelaksanaan penyelesaian caching yang mudah. ​​Pelaksanaan khusus adalah seperti berikut

const cash: any = {};
function isUndefined(target: any) {
    return target === void 0;
}
async function sum(...nums: number[]) {
    let res: any = 0;
    const key = nums.join('+');
    if (!isUndefined(cash[key])) return cash[key];
    for (const n of nums) {
        res = await caculate(res, n);
    }
    cash[key] = res;
    return res;
}
function caculate(num1: number, num2: number) {
    return new Promise((resolve, reject) => {
        asyncAdd(num1, num2, (err: any, rs: number) => {
            if (err) {
                reject(err);
                return;
            }
            resolve(rs);
        });
    })
}

【相关推荐：javascript视频教程、web前端】

Atas ialah kandungan terperinci Pengenalan kepada JavaScript: Kaedah asyncAdd penambahan tak segerak tulisan tangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!