𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗦𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗮𝗻𝗱 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁
JavaScript ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਇੱਕ ਹੀ ਕੰਮ (task) ਕਰਦਾ ਹੈ। ਇਸਦਾ ਕਾਰਨ ਇਹ ਹੈ ਕਿ ਇਹ ਇੱਕ single-threaded ਭਾਸ਼ਾ ਹੈ।
ਤੇਜ਼ ਐਪਸ ਬਣਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ synchronous ਅਤੇ asynchronous ਕੋਡ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਪਤਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
Synchronous Execution
ਕੋਡ ਲਾਈਨ-ਦਰ-ਲਾਈਨ ਚੱਲਦਾ ਹੈ। ਹਰ ਕੰਮ ਪਿਛਲੇ ਕੰਮ ਦੇ ਖਤਮ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਦਾ ਹੈ।
ਇੱਕ ATM ਦੀ ਲਾਈਨ ਬਾਰੇ ਸੋਚੋ। ਪਹਿਲੇ ਵਿਅਕਤੀ ਦੇ ਕੰਮ ਖਤਮ ਕੀਤੇ ਬਿਨਾਂ ਦੂਜਾ ਵਿਅਕਤੀ ਮਸ਼ੀਨ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰ ਸਕਦਾ।
ਜੇਕਰ ਇੱਕ ਕੰਮ ਵਿੱਚ ਬਹੁਤ ਸਮਾਂ ਲੱਗਦਾ ਹੈ, ਤਾਂ ਪੂਰਾ ਪ੍ਰੋਗਰਾਮ ਰੁਕ ਜਾਂਦਾ ਹੈ। ਇਸਨੂੰ blocking ਕਿਹਾ ਜਾਂਦਾ ਹੈ।
Asynchronous Execution
ਕੰਮ ਸੁਤੰਤਰ ਤੌਰ 'ਤੇ ਚੱਲਦੇ ਹਨ। JavaScript ਇੱਕ ਕੰਮ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਅਤੇ ਤੁਰੰਤ ਅਗਲੇ ਕੰਮ ਵੱਲ ਵਧ ਜਾਂਦਾ ਹੈ।
ਇੱਕ ਰੈਸਟੋਰੈਂਟ ਬਾਰੇ ਸੋਚੋ। ਤੁਸੀਂ ਖਾਣਾ ਆਰਡਰ ਕਰਦੇ ਹੋ, ਫਿਰ ਉਡੀਕ ਕਰਦੇ ਸਮੇਂ ਆਪਣੇ ਦੋਸਤਾਂ ਨਾਲ ਗੱਲਾਂ ਕਰਦੇ ਹੋ। ਤੁਸੀਂ ਕੁਝ ਹੋਰ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਸਿਰਫ਼ ਖਾਣਾ ਆਉਣ ਦੀ ਉਡੀਕ ਵਿੱਚ ਬੈਠੇ ਨਹੀਂ ਰਹਿੰਦੇ।
Asynchronous ਕੋਡ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਇਹਨਾਂ ਸਮੇਂ ਦੌਰਾਨ ਫ੍ਰੀਜ਼ (freeze) ਹੋਣ ਤੋਂ ਰੋਕਦਾ ਹੈ:
- API requests
- Database queries
- File reading
- Image uploads
Asynchronous ਕੋਡ ਨੂੰ ਸੰਭਾਲਣ ਦੇ ਤਿੰਨ ਤਰੀਕੇ:
Callbacks ਇੱਕ ਖਾਸ ਕੰਮ ਪੂਰਾ ਹੋਣ ਤੋਂ ਬਾਅਦ ਇੱਕ ਫੰਕਸ਼ਨ ਚੱਲਦਾ ਹੈ। ਇਹ ਇੱਕ ਡਿਲੀਵਰੀ ਡਰਾਈਵਰ ਵਾਂਗ ਹੈ ਜੋ ਤੁਹਾਡਾ ਖਾਣਾ ਪਹੁੰਚਣ 'ਤੇ ਤੁਹਾਨੂੰ ਫ਼ੋਨ ਕਰਦਾ ਹੈ।
Promises ਇੱਕ promise ਭਵਿੱਖ ਦੇ ਨਤੀਜੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਇਹ pending ਸਥਿਤੀ ਵਿੱਚ ਰਹਿੰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਇਹ resolved (ਸਫਲਤਾ) ਜਾਂ rejected (ਗਲਤੀ) ਨਹੀਂ ਹੋ ਜਾਂਦਾ।
Async/Await ਇਹ asynchronous ਕੋਡ ਨੂੰ synchronous ਕੋਡ ਵਾਂਗ ਦਿਖਾਉਂਦਾ ਹੈ। ਇਸਨੂੰ ਪੜ੍ਹਨਾ ਆਸਾਨ ਹੈ। ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਬਾਕੀ ਹਿੱਸੇ ਨੂੰ ਰੋਕੇ ਬਿਨਾਂ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਰੋਕਣ ਲਈ await ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ।
ਇਹ ਅੰਦਰੂਨੀ ਤੌਰ 'ਤੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:
JavaScript ਇਹਨਾਂ ਕੰਮਾਂ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ ਇੱਕ Event Loop ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
- Call Stack: ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ।
- Web APIs: ਟਾਈਮਰ ਜਾਂ fetch ਵਰਗੇ ਲੰਬੇ ਕੰਮਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।
- Callback Queue: ਪੂਰੇ ਹੋਏ ਕੰਮਾਂ ਨੂੰ ਰੱਖਦਾ ਹੈ।
- Event Loop: ਜਦੋਂ stack ਖਾਲੀ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਇਹ ਕੰਮਾਂ ਨੂੰ queue ਤੋਂ stack ਵਿੱਚ ਲੈ ਜਾਂਦਾ ਹੈ।
ਤੁਲਨਾ:
Synchronous:
- ਕ੍ਰਮਵਾਰ ਚੱਲਦਾ ਹੈ
- ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਰੋਕਦਾ ਹੈ
- ਲਿਖਣ ਵਿੱਚ ਸਰਲ ਹੈ
- ਭਾਰੀ ਕੰਮਾਂ ਲਈ ਹੌਲੀ ਹੈ
Asynchronous:
- ਸੁਤੰਤਰ ਤੌਰ 'ਤੇ ਚੱਲਦਾ ਹੈ
- Non-blocking
- ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ
- ਵੈੱਬ ਐਪਸ ਲਈ ਕੁਸ਼ਲ ਹੈ
ਇਹਨਾਂ ਸੰਕਲਪਾਂ ਵਿੱਚ ਮਾਹਰ ਹੋਣਾ React, Node.js, ਅਤੇ ਆਧੁਨਿਕ APIs ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਕੁੰਜੀ ਹੈ।
Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea