JavaScript ਵਿੱਚ ਲੂਪਸ ਦੇ ਅੰਦਰ ਫੰਕਸ਼ਨ ਦੁਹਰਾਓ ਫਿਕਸ ਕਰਨਾ
ਕਈ ਵਾਰ, ਜਦੋਂ JavaScript ਵਿੱਚ ਲੂਪਸ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹੋ, ਤਾਂ ਉਹਨਾਂ ਲੂਪਸ ਦੇ ਅੰਦਰ ਫੰਕਸ਼ਨ ਉਮੀਦ ਅਨੁਸਾਰ ਵਿਹਾਰ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਉਹਨਾਂ ਦ੍ਰਿਸ਼ਾਂ ਵਿੱਚ ਜਿੱਥੇ ਤੁਸੀਂ ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਜਾਂ ਦੁਹਰਾਉਣ ਵਾਲੀ ਕਾਰਵਾਈ ਚਾਹੁੰਦੇ ਹੋ, ਫੰਕਸ਼ਨ ਸਿਰਫ ਇੱਕ ਵਾਰ ਚਾਲੂ ਹੋ ਸਕਦਾ ਹੈ, ਭਾਵੇਂ ਲੂਪ ਕਈ ਵਾਰ ਚੱਲਦਾ ਹੈ।
ਇਹ ਖਾਸ ਤੌਰ 'ਤੇ ਨਿਰਾਸ਼ਾਜਨਕ ਹੋ ਸਕਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਸਕ੍ਰੀਨ 'ਤੇ ਤੀਰ ਜਾਂ ਬਕਸੇ ਵਰਗੇ ਤੱਤਾਂ ਨੂੰ ਹਿਲਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ, ਅਤੇ ਕਾਰਵਾਈ ਇਰਾਦੇ ਮੁਤਾਬਕ ਨਹੀਂ ਦੁਹਰਾਈ ਜਾਂਦੀ ਹੈ। ਲੂਪ ਸਹੀ ਮੁੱਲਾਂ ਨੂੰ ਲੌਗ ਕਰ ਸਕਦਾ ਹੈ ਪਰ ਫੰਕਸ਼ਨ ਨੂੰ ਲਗਾਤਾਰ ਚਲਾਉਣ ਵਿੱਚ ਅਸਫਲ ਹੋ ਸਕਦਾ ਹੈ।
JavaScript ਵਿੱਚ, ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਮੁੱਦਾ ਅਕਸਰ ਰਾਹ ਦੇ ਕਾਰਨ ਪੈਦਾ ਹੁੰਦਾ ਹੈ ਜਾਂ ਟਾਈਮਰ, ਜਿਵੇਂ , ਲੂਪਸ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰੋ। ਇਸ ਵਿਵਹਾਰ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਡੀਆਂ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਦੁਹਰਾਉਣ ਵਾਲੀਆਂ ਕਾਰਵਾਈਆਂ ਦਾ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਬੰਧਨ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।
ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਆਮ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਾਂਗੇ: ਇੱਕ ਲੂਪ ਲੌਗ ਉਮੀਦ ਅਨੁਸਾਰ ਮੁੱਲਾਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਪਰ ਜਿਸ ਫੰਕਸ਼ਨ ਨੂੰ ਇਹ ਕਾਲ ਕਰਦਾ ਹੈ ਉਸ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਨੂੰ ਦੁਹਰਾਉਂਦਾ ਨਹੀਂ ਹੈ। ਅਸੀਂ ਇਹ ਪਤਾ ਲਗਾਵਾਂਗੇ ਕਿ ਅਜਿਹਾ ਕਿਉਂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਇਹ ਕਿਵੇਂ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾਵੇ ਕਿ ਫੰਕਸ਼ਨ ਹਰ ਇੱਕ ਲੂਪ ਦੁਹਰਾਓ ਦੇ ਨਾਲ ਲਗਾਤਾਰ ਚੱਲਦਾ ਹੈ।
| ਹੁਕਮ | ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ |
|---|---|
| clearInterval() | setInterval() ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੇ ਗਏ ਟਾਈਮਰ ਨੂੰ ਰੋਕਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਫੰਕਸ਼ਨ ਨੂੰ ਅਣਮਿੱਥੇ ਸਮੇਂ ਤੱਕ ਚੱਲਣ ਤੋਂ ਰੋਕਦਾ ਹੈ। ਐਨੀਮੇਸ਼ਨ ਦੇ ਦੁਹਰਾਓ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ। |
| setInterval() | ਨਿਸ਼ਚਿਤ ਅੰਤਰਾਲਾਂ (ਮਿਲੀਸਕਿੰਟ ਵਿੱਚ) ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਇਹ ਮੂਵਿੰਗ ਐਲੀਮੈਂਟਸ ਦੇ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਉਦੋਂ ਤੱਕ ਚਾਲੂ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਇੱਕ ਖਾਸ ਸ਼ਰਤ ਪੂਰੀ ਨਹੀਂ ਹੋ ਜਾਂਦੀ। |
| resolve() | ਵਾਅਦਾ ਬਣਤਰ ਵਿੱਚ, ਹੱਲ() ਇੱਕ ਅਸਿੰਕ੍ਰੋਨਸ ਓਪਰੇਸ਼ਨ ਦੇ ਪੂਰਾ ਹੋਣ ਦਾ ਸੰਕੇਤ ਦਿੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਐਨੀਮੇਸ਼ਨ ਖਤਮ ਹੋਣ ਤੋਂ ਬਾਅਦ ਲੂਪ ਦੀ ਅਗਲੀ ਦੁਹਰਾਅ ਜਾਰੀ ਰਹਿੰਦੀ ਹੈ। |
| await | ਅਸਿੰਕ੍ਰੋਨਸ ਫੰਕਸ਼ਨ (ਐਨੀਮੇਸ਼ਨ) ਪੂਰਾ ਹੋਣ ਤੱਕ ਲੂਪ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਨੂੰ ਰੋਕਦਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਹਰੇਕ ਐਨੀਮੇਸ਼ਨ ਚੱਕਰ ਅਗਲਾ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਪੂਰਾ ਹੋ ਜਾਂਦਾ ਹੈ। |
| Promise() | ਇੱਕ ਵਾਅਦਾ ਆਬਜੈਕਟ ਵਿੱਚ ਅਸਿੰਕਰੋਨਸ ਐਕਸ਼ਨਾਂ ਨੂੰ ਲਪੇਟਦਾ ਹੈ, ਐਨੀਮੇਸ਼ਨ ਵਰਗੀਆਂ ਵਾਰ-ਵਾਰ ਕਾਰਵਾਈਆਂ ਨੂੰ ਚਲਾਉਣ ਵੇਲੇ ਸਮੇਂ ਅਤੇ ਪ੍ਰਵਾਹ ਉੱਤੇ ਬਿਹਤਰ ਨਿਯੰਤਰਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। |
| new Promise() | ਇੱਕ ਵਾਅਦਾ ਆਬਜੈਕਟ ਦਾ ਨਿਰਮਾਣ ਕਰਦਾ ਹੈ, ਜੋ ਅਸਿੰਕ੍ਰੋਨਸ ਓਪਰੇਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਇਹ ਹਰੇਕ ਲੂਪ ਦੁਹਰਾਓ ਲਈ ਐਨੀਮੇਸ਼ਨ ਕ੍ਰਮ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦਾ ਹੈ। |
| console.log() | ਵੇਰੀਏਬਲ ਜਾਂ ਓਪਰੇਸ਼ਨਾਂ ਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਕੰਸੋਲ 'ਤੇ ਲੌਗ ਕਰਦਾ ਹੈ, ਡੀਬੱਗਿੰਗ ਲਈ ਉਪਯੋਗੀ ਹੈ। ਇੱਥੇ, ਇਸਦੀ ਵਰਤੋਂ ਲੂਪ ਕਾਊਂਟਰ ਅਤੇ ਤੱਤ ਸਥਿਤੀ ਨੂੰ ਟਰੈਕ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। |
| let | ਇੱਕ ਬਲਾਕ-ਸਕੋਪਡ ਵੇਰੀਏਬਲ ਘੋਸ਼ਣਾ। ਉਦਾਹਰਨ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ sicocxle ਅਤੇ dos ਵਰਗੇ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਘੋਸ਼ਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜੋ ਲੂਪ ਦੁਹਰਾਓ ਅਤੇ ਤੱਤ ਦੀ ਗਤੀ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਦੇ ਹਨ। |
| document.getElementById() | ਨਿਰਧਾਰਤ ID ਨਾਲ DOM ਤੱਤ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਇਹ ਸਕ੍ਰਿਪਟ ਨੂੰ ਐਨੀਮੇਸ਼ਨ ਦੇ ਦੌਰਾਨ ਤੀਰ ਤੱਤ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। |
JavaScript ਲੂਪਸ ਵਿੱਚ ਫੰਕਸ਼ਨ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਦੀ ਪੜਚੋਲ ਕਰਨਾ
ਉਪਰੋਕਤ ਸਕ੍ਰਿਪਟਾਂ ਦੁਆਰਾ ਸੰਬੋਧਿਤ ਕੀਤਾ ਗਿਆ ਮੁੱਖ ਮੁੱਦਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਘੁੰਮਦਾ ਹੈ ਕਿ ਇੱਕ ਫੰਕਸ਼ਨ a ਦੇ ਅੰਦਰ ਬੁਲਾਇਆ ਗਿਆ ਹੈ ਉਮੀਦ ਅਨੁਸਾਰ ਵਿਹਾਰ ਕਰਦਾ ਹੈ। ਉਦਾਹਰਨ ਵਿੱਚ, ਲੂਪ 9, 8, 7, ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਲੌਗ ਕਰਦਾ ਹੈ, ਪਰ ਫੰਕਸ਼ਨ ਇਸ ਦੇ ਅੰਦੋਲਨ ਨੂੰ ਦੁਹਰਾਉਂਦਾ ਨਹੀਂ ਹੈ. ਇਸਦਾ ਕਾਰਨ ਇਹ ਹੈ ਕਿ ਲੂਪ ਫੰਕਸ਼ਨ ਨੂੰ ਕਈ ਵਾਰ ਚਲਾਉਂਦਾ ਹੈ, ਪਰ ਹਰ ਵਾਰ, ਅਗਲੀ ਵਾਰ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਐਨੀਮੇਸ਼ਨ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ। ਇਸ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਇਹ ਨਿਯੰਤਰਿਤ ਕਰਨਾ ਹੈ ਕਿ ਫੰਕਸ਼ਨ ਅਸਿੰਕਰੋਨਸ ਕਿਵੇਂ ਵਿਵਹਾਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੈ ਕਿ ਹਰੇਕ ਐਨੀਮੇਸ਼ਨ ਅਗਲੀ ਦੁਹਰਾਅ ਤੋਂ ਪਹਿਲਾਂ ਪੂਰਾ ਹੋ ਜਾਵੇ।
ਪਹਿਲੀ ਸਕ੍ਰਿਪਟ ਵਿੱਚ, ਅਸੀਂ ਇਸਦੀ ਵਰਤੋਂ ਕੀਤੀ ਐਨੀਮੇਸ਼ਨ ਲਈ ਸਮਾਂਬੱਧ ਲੂਪ ਬਣਾਉਣ ਲਈ। ਇਹ ਵਿਧੀ ਤੱਤ ਨੂੰ ਇਸਦੇ ਸਥਿਤੀ ਮੁੱਲਾਂ ਨੂੰ ਘਟਾ ਕੇ ਅਤੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸਦੀ CSS ਸ਼ੈਲੀ ਨੂੰ ਅੱਪਡੇਟ ਕਰਕੇ ਅੱਗੇ ਵਧਾਉਂਦੀ ਹੈ। ਹਾਲਾਂਕਿ, ਲੂਪ ਫੰਕਸ਼ਨ ਨੂੰ ਦੁਬਾਰਾ ਕਾਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਐਨੀਮੇਸ਼ਨ ਦੇ ਖਤਮ ਹੋਣ ਦੀ ਉਡੀਕ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਵਰਤ ਕੇ , ਸਕ੍ਰਿਪਟ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਕਿਸੇ ਵੀ ਓਵਰਲੈਪ ਜਾਂ ਦੁਰਵਿਵਹਾਰ ਨੂੰ ਰੋਕਦੇ ਹੋਏ, ਦੁਹਰਾਓ ਦੇ ਵਿਚਕਾਰ ਟਾਈਮਰ ਰੀਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ, ਇਹ ਅਜੇ ਵੀ ਨਿਰਵਿਘਨ ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਹਰੇਕ ਲੂਪ ਦੁਹਰਾਅ ਦੇ ਸਮੇਂ ਨੂੰ ਨਿਯੰਤਰਿਤ ਨਹੀਂ ਕਰਦਾ ਹੈ।
ਦੂਸਰੀ ਸਕ੍ਰਿਪਟ ਪੇਸ਼ ਕਰਕੇ ਪਹਿਲੀ ਤੇ ਸੁਧਾਰ ਕਰਦੀ ਹੈ ਅਸਿੰਕਰੋਨਸ ਕਾਰਵਾਈਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ। ਲਹਿਰ ਤਰਕ ਨੂੰ ਅੰਦਰ ਲਪੇਟ ਕੇ ਏ , ਅਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਾਂ ਕਿ ਫੰਕਸ਼ਨ srol() ਐਨੀਮੇਸ਼ਨ ਖਤਮ ਹੋਣ ਤੋਂ ਬਾਅਦ ਹੀ ਪੂਰਾ ਹੋਵੇਗਾ। ਦ ਕੀਵਰਡ ਲੂਪ ਨੂੰ ਐਨੀਮੇਸ਼ਨ ਹੋਣ ਤੱਕ ਰੋਕਣ ਲਈ ਮਜ਼ਬੂਰ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਅੰਦੋਲਨ ਦੀ ਇੱਕ ਨਿਰਵਿਘਨ, ਕ੍ਰਮਵਾਰ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਬਣ ਜਾਂਦੀ ਹੈ। ਇਹ ਵਿਧੀ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਅਨੁਮਾਨਯੋਗ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਅੰਦੋਲਨ ਚੱਕਰ ਦੇ ਕਿਸੇ ਵੀ ਅਚਾਨਕ ਓਵਰਲੈਪ ਜਾਂ ਛੇਤੀ ਸਮਾਪਤੀ ਤੋਂ ਬਚਦਾ ਹੈ।
ਅੰਤਮ ਪਹੁੰਚ ਵਿੱਚ, ਅਸੀਂ ਲਾਗੂ ਕੀਤਾ ਏ ਸਰਵਰ ਵਾਤਾਵਰਣ ਵਿੱਚ ਐਨੀਮੇਸ਼ਨ ਤਰਕ ਦੀ ਨਕਲ ਕਰਨ ਲਈ ਬੈਕਐਂਡ। ਹਾਲਾਂਕਿ ਆਮ ਤੌਰ 'ਤੇ ਇਸ ਕਿਸਮ ਦੀ ਐਨੀਮੇਸ਼ਨ ਫਰੰਟ-ਐਂਡ 'ਤੇ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਸਰਵਰ ਸਾਈਡ 'ਤੇ ਸਮੇਂ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨਾ ਐਨੀਮੇਸ਼ਨਾਂ ਦੇ ਵਧੇਰੇ ਸਟੀਕ ਨਿਯੰਤਰਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਉੱਚ-ਪ੍ਰਦਰਸ਼ਨ ਵਾਲੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਜਾਂ ਸਰਵਰ-ਕਲਾਇੰਟ ਇੰਟਰੈਕਸ਼ਨਾਂ ਨਾਲ ਨਜਿੱਠਣ ਵੇਲੇ। ਇਹ ਸੰਸਕਰਣ ਵੀ ਵਰਤਦਾ ਹੈ ਅਤੇ ਟਾਈਮਿੰਗ ਨੂੰ ਸੰਭਾਲਣ ਲਈ, ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨਾ ਕਿ ਅੰਦੋਲਨ ਇਕਸਾਰ ਹੈ ਅਤੇ ਅਗਲੀ ਦੁਹਰਾਓ 'ਤੇ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਸਹੀ ਢੰਗ ਨਾਲ ਪੂਰਾ ਹੋਇਆ ਹੈ।
JavaScript ਵਿੱਚ ਲੂਪ ਅਤੇ ਟਾਈਮਰ ਇੰਟਰਐਕਸ਼ਨ ਮੁੱਦਾ
ਇਹ ਹੱਲ ਫਰੰਟ-ਐਂਡ DOM ਹੇਰਾਫੇਰੀ ਲਈ ਵਨੀਲਾ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਲੂਪਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅੰਦੋਲਨ ਐਨੀਮੇਸ਼ਨ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਤ ਕਰਦਾ ਹੈ ਅਤੇ setInterval.
let sicocxle = 9; // Initial loop counterlet od = 0; // Timer control variablelet dos = 0, dosl = 0; // Variables for element positionfunction srol() {let lem = document.getElementById("arrow"); // Get the elementclearInterval(od); // Clear any previous intervalsod = setInterval(aim, 10); // Set a new intervalfunction aim() {if (dos > -100) {dos--;dosl++;lem.style.top = dos + 'px'; // Move element verticallylem.style.left = dosl + 'px'; // Move element horizontally} else {clearInterval(od); // Stop movement if limit reached}}}// Loop to trigger the animation function repeatedlyfor (sicocxle; sicocxle > 1; sicocxle--) {console.log(sicocxle); // Log loop countersrol(); // Trigger animation}
ਅਸਿੰਕਰੋਨਸ ਨਿਯੰਤਰਣ ਨਾਲ ਸੁਧਾਰੀ ਪਹੁੰਚ
ਇਹ ਹੱਲ ਵਰਤਦਾ ਹੈ JavaScript ਵਿੱਚ ਅਸਿੰਕਰੋਨਸ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਉੱਤੇ ਬਿਹਤਰ ਨਿਯੰਤਰਣ ਲਈ।
let sicocxle = 9; // Loop counterlet dos = 0, dosl = 0; // Position variableslet od = 0; // Timer variablefunction srol() {return new Promise((resolve) => {let lem = document.getElementById("arrow");clearInterval(od);od = setInterval(aim, 10);function aim() {if (dos > -100) {dos--;dosl++;lem.style.top = dos + 'px';lem.style.left = dosl + 'px';} else {clearInterval(od);resolve(); // Resolve promise when done}}});}// Async function to wait for each iteration to completeasync function runLoop() {for (let i = sicocxle; i > 1; i--) {console.log(i);await srol(); // Wait for each animation to finish}}runLoop();
ਸਰਵਰ-ਸਾਈਡ ਟਾਈਮਿੰਗ ਨਿਯੰਤਰਣ ਲਈ Node.js ਨਾਲ ਬੈਕਐਂਡ ਸਕ੍ਰਿਪਟ
ਇਸ ਪਹੁੰਚ ਵਿੱਚ ਸਮੇਂ ਅਤੇ ਕਾਰਵਾਈਆਂ ਦੇ ਸਰਵਰ-ਸਾਈਡ ਨਿਯੰਤਰਣ ਲਈ Node.js ਦੀ ਵਰਤੋਂ ਸ਼ਾਮਲ ਹੈ। ਅਸੀਂ ਇਕਸਾਰਤਾ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਐਨੀਮੇਸ਼ਨ ਤਰਕ ਦੀ ਨਕਲ ਕਰਦੇ ਹਾਂ।
const http = require('http');let dos = 0, dosl = 0; // Position variableslet sicocxle = 9; // Loop counterlet od = null; // Timer variablefunction aim() {return new Promise((resolve) => {od = setInterval(() => {if (dos > -100) {dos--;dosl++;console.log(`Moving: ${dos}, ${dosl}`);} else {clearInterval(od);resolve(); // Stop interval after completion}}, 10);});}async function runLoop() {for (let i = sicocxle; i > 1; i--) {console.log(`Loop count: ${i}`);await aim(); // Wait for each animation to finish}}runLoop();// Set up HTTP server for backend controlhttp.createServer((req, res) => {res.writeHead(200, {'Content-Type': 'text/plain'});res.end('Loop and animation running!');}).listen(3000);console.log('Server running at http://localhost:3000');
ਦੇਰੀ ਵਾਲੀਆਂ ਕਾਰਵਾਈਆਂ ਨਾਲ ਲੂਪਸ ਵਿੱਚ ਫੰਕਸ਼ਨ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਮੁੱਦਿਆਂ ਨੂੰ ਹੱਲ ਕਰਨਾ
ਲੂਪਸ ਦੇ ਅੰਦਰ ਨਾ ਦੁਹਰਾਉਣ ਵਾਲੇ ਫੰਕਸ਼ਨਾਂ ਦੇ ਮੁੱਦੇ ਨੂੰ ਹੱਲ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਨਾਜ਼ੁਕ ਪਹਿਲੂ ਇਹ ਸਮਝ ਰਿਹਾ ਹੈ ਕਿ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ। ਬਹੁਤ ਸਾਰੇ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਸਮੱਸਿਆ ਪੈਦਾ ਹੁੰਦੀ ਹੈ ਕਿਉਂਕਿ ਲੂਪ ਸਮਕਾਲੀ ਤੌਰ 'ਤੇ ਚੱਲਦਾ ਹੈ ਜਦੋਂ ਕਿ ਇਸਦੇ ਅੰਦਰਲੇ ਫੰਕਸ਼ਨ ਨੂੰ ਅਸਿੰਕਰੋਨਸ ਢੰਗ ਨਾਲ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ। JavaScript ਇਵੈਂਟ ਲੂਪ ਪ੍ਰਬੰਧਨ ਕਰਦਾ ਹੈ ਕਿ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਕਿਵੇਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਅਸਿੰਕਰੋਨਸ ਓਪਰੇਸ਼ਨ ਹੁੰਦੇ ਹਨ ਜਿਵੇਂ ਕਿ ਜਾਂ . ਸਹੀ ਹੈਂਡਲਿੰਗ ਦੇ ਬਿਨਾਂ, ਅਸਿੰਕਰੋਨਸ ਐਕਸ਼ਨ ਲੂਪ ਦੇ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਫਲੋ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਨਾਲ ਇਕਸਾਰ ਨਹੀਂ ਹੋ ਸਕਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਫੰਕਸ਼ਨ ਸਹੀ ਤਰ੍ਹਾਂ ਦੁਹਰਾਇਆ ਨਹੀਂ ਜਾ ਸਕਦਾ।
ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਦ੍ਰਿਸ਼ਾਂ ਵਿੱਚ ਇੱਕ ਆਮ ਗਲਤੀ JavaScript ਦੀ ਗੈਰ-ਬਲਾਕ ਕਰਨ ਵਾਲੀ ਪ੍ਰਕਿਰਤੀ ਲਈ ਲੇਖਾ ਨਹੀਂ ਹੈ। ਕਿਉਂਕਿ JavaScript ਸਿੰਗਲ-ਥ੍ਰੈੱਡਡ ਹੈ, ਐਨੀਮੇਸ਼ਨ ਵਰਗੇ ਓਪਰੇਸ਼ਨਾਂ ਨੂੰ ਕਾਲਬੈਕ, ਵਾਅਦੇ, ਜਾਂ ਅਸਿੰਕ ਫੰਕਸ਼ਨਾਂ ਨਾਲ ਹੈਂਡਲ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਤਾਂ ਜੋ ਇਹ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ ਕਿ ਹਰੇਕ ਦੁਹਰਾਓ ਐਨੀਮੇਸ਼ਨ ਜਾਂ ਫੰਕਸ਼ਨ ਦੇ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਦੀ ਵਰਤੋਂ ਗਾਰੰਟੀ ਦਿੰਦਾ ਹੈ ਕਿ ਫੰਕਸ਼ਨ ਅਗਲੀ ਦੁਹਰਾਅ 'ਤੇ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਅੰਤਰਾਲ ਦੇ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਦਾ ਹੈ, ਲੂਪ ਨੂੰ ਬਹੁਤ ਤੇਜ਼ੀ ਨਾਲ ਚੱਲਣ ਤੋਂ ਰੋਕਦਾ ਹੈ ਅਤੇ ਪ੍ਰਕਿਰਿਆ ਦੇ ਗੁੰਮ ਹੋਏ ਕਦਮਾਂ ਨੂੰ ਰੋਕਦਾ ਹੈ।
ਲੂਪਸ ਦੇ ਅੰਦਰ ਦੁਹਰਾਉਣ ਵਾਲੀਆਂ ਕਾਰਵਾਈਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਹੋਰ ਉਪਯੋਗੀ ਪਹੁੰਚ ਕਸਟਮ ਟਾਈਮਿੰਗ ਵਿਧੀ ਜਾਂ ਬੇਨਤੀ ਐਨੀਮੇਸ਼ਨਫ੍ਰੇਮ ਦਾ ਲਾਭ ਉਠਾਉਣਾ ਹੈ, ਜੋ ਸੈੱਟਇੰਟਰਵਲ ਨਾਲੋਂ ਐਨੀਮੇਸ਼ਨਾਂ 'ਤੇ ਵਧੇਰੇ ਨਿਯੰਤਰਣ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਰਿਫਰੈਸ਼ ਦਰ ਨਾਲ ਸਮਕਾਲੀ, ਮੈਨੂਅਲ ਟਾਈਮਿੰਗ ਦੇ ਬਿਨਾਂ ਨਿਰਵਿਘਨ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਗੁੰਝਲਦਾਰ ਐਨੀਮੇਸ਼ਨਾਂ ਨਾਲ ਨਜਿੱਠਣ ਵੇਲੇ ਜਾਂ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਵੇਲੇ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਉੱਚ-ਤੀਬਰਤਾ ਵਾਲੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ। ਇਹਨਾਂ ਰਣਨੀਤੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ ਉਹਨਾਂ ਮੁੱਦਿਆਂ ਤੋਂ ਬਚ ਸਕਦੇ ਹੋ ਜਿੱਥੇ ਫੰਕਸ਼ਨ ਆਪਣੇ ਆਪ ਨੂੰ ਲੂਪ ਵਿੱਚ ਸਹੀ ਢੰਗ ਨਾਲ ਨਹੀਂ ਦੁਹਰਾਉਂਦਾ ਹੈ।
- ਮੇਰਾ ਫੰਕਸ਼ਨ ਲੂਪ ਦੇ ਅੰਦਰ ਕਿਉਂ ਨਹੀਂ ਦੁਹਰਾਉਂਦਾ ਹੈ?
- ਇਹ ਅਕਸਰ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਲੂਪ ਸਮਕਾਲੀ ਤੌਰ 'ਤੇ ਚੱਲਦਾ ਹੈ, ਪਰ ਇਸਦੇ ਅੰਦਰਲਾ ਫੰਕਸ਼ਨ ਅਸਿੰਕਰੋਨਸ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ। ਵਰਤੋ ਜਾਂ ਇਸਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਦਾ ਵਾਅਦਾ ਕਰਦਾ ਹੈ।
- ਮੈਂ JavaScript ਵਿੱਚ ਐਨੀਮੇਸ਼ਨਾਂ ਦਾ ਸਮਾਂ ਕਿਵੇਂ ਠੀਕ ਕਰਾਂ?
- ਵਰਤੋ ਜਾਂ ਐਨੀਮੇਸ਼ਨ ਦੇ ਸਮੇਂ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ. ਬਾਅਦ ਵਾਲਾ ਗੁੰਝਲਦਾਰ ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ ਵਧੇਰੇ ਕੁਸ਼ਲ ਹੈ।
- ਲੂਪਸ ਵਿੱਚ ਕਲੀਅਰ ਇੰਟਰਵਲ ਦੀ ਭੂਮਿਕਾ ਕੀ ਹੈ?
- setInterval ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੇ ਫੰਕਸ਼ਨ ਦੇ ਦੁਹਰਾਓ ਨੂੰ ਰੋਕਦਾ ਹੈ। ਇਹ ਪ੍ਰਬੰਧਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਐਨੀਮੇਸ਼ਨ ਕਦੋਂ ਰੁਕ ਜਾਵੇ ਜਾਂ ਰੀਸੈਟ ਹੋਵੇ।
- ਮੇਰੀ ਲੂਪ ਐਨੀਮੇਸ਼ਨ ਨਾਲੋਂ ਤੇਜ਼ ਕਿਉਂ ਚੱਲ ਰਹੀ ਹੈ?
- ਲੂਪ ਸਮਕਾਲੀ ਹੈ, ਪਰ ਐਨੀਮੇਸ਼ਨ ਅਸਿੰਕ੍ਰੋਨਸ ਹੈ। ਵਰਤੋ ਜਾਰੀ ਰੱਖਣ ਤੋਂ ਪਹਿਲਾਂ ਐਨੀਮੇਸ਼ਨ ਦੇ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਨ ਲਈ ਲੂਪ ਦੇ ਅੰਦਰ।
- ਕੀ ਮੈਂ ਦੁਹਰਾਉਣ ਵਾਲੀਆਂ ਕਾਰਵਾਈਆਂ ਲਈ setInterval ਦੀ ਬਜਾਏ setTimeout ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹਾਂ?
- ਹਾਂ, ਪਰ ਇੱਕਲੇ ਕਾਰਵਾਈਆਂ ਵਿੱਚ ਦੇਰੀ ਕਰਨ ਲਈ ਹੈ, ਜਦਕਿ ਨਿਯਮਤ ਅੰਤਰਾਲਾਂ 'ਤੇ ਦੁਹਰਾਉਣ ਵਾਲੀਆਂ ਕਾਰਵਾਈਆਂ ਲਈ ਬਿਹਤਰ ਅਨੁਕੂਲ ਹੈ।
ਸਮਕਾਲੀ ਲੂਪਸ ਦੇ ਅੰਦਰ ਅਸਿੰਕਰੋਨਸ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਣਾ ਚੁਣੌਤੀਪੂਰਨ ਹੋ ਸਕਦਾ ਹੈ, ਪਰ ਜਿਵੇਂ ਕਿ ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ , , ਅਤੇ , ਤੁਸੀਂ ਫੰਕਸ਼ਨ ਦੇ ਪੂਰਾ ਹੋਣ ਦੇ ਨਾਲ ਹਰੇਕ ਲੂਪ ਦੁਹਰਾਓ ਦੇ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਨੂੰ ਸਿੰਕ੍ਰੋਨਾਈਜ਼ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਸਮੇਂ ਦੇ ਮੁੱਦਿਆਂ ਦੇ ਬਿਨਾਂ ਇੱਕ ਨਿਰਵਿਘਨ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ।
ਸਮੇਂ ਨੂੰ ਸਾਵਧਾਨੀ ਨਾਲ ਨਿਯੰਤਰਿਤ ਕਰਨ ਅਤੇ ਲੋੜ ਪੈਣ 'ਤੇ ਅੰਤਰਾਲਾਂ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਨਾਲ, ਤੁਹਾਡੇ ਐਨੀਮੇਸ਼ਨ ਉਮੀਦ ਅਨੁਸਾਰ ਵਿਹਾਰ ਕਰਨਗੇ, ਲਗਾਤਾਰ ਦੁਹਰਾਉਣਗੇ। ਇਹ ਤਕਨੀਕਾਂ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ JavaScript ਐਨੀਮੇਸ਼ਨਾਂ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਅਤੇ ਅਨੁਮਾਨਯੋਗਤਾ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਤੌਰ 'ਤੇ ਸੁਧਾਰ ਕਰ ਸਕਦੀਆਂ ਹਨ, ਵੱਖ-ਵੱਖ ਵਾਤਾਵਰਣਾਂ ਵਿੱਚ ਸਹੀ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੀਆਂ ਹਨ।
- ਇਹ ਲੇਖ JavaScript ਦੇ ਇਵੈਂਟ ਲੂਪ, ਅਸਿੰਕ੍ਰੋਨਸ ਫੰਕਸ਼ਨਾਂ, ਅਤੇ ਟਾਈਮਿੰਗ ਵਿਧੀ ਦੇ ਵਿਸਤ੍ਰਿਤ ਖੋਜ ਅਤੇ ਗਿਆਨ ਦੇ ਅਧਾਰ ਤੇ ਬਣਾਇਆ ਗਿਆ ਸੀ। ਅਤਿਰਿਕਤ ਜਾਣਕਾਰੀ ਨਾਮਵਰ ਵਿਕਾਸ ਸਰੋਤਾਂ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੀ ਗਈ ਸੀ ਜਿਵੇਂ ਕਿ MDN ਵੈੱਬ ਡੌਕਸ - ਲੂਪਸ ਅਤੇ ਦੁਹਰਾਓ .
- ਅਸਿੰਕਰੋਨਸ JavaScript ਨੂੰ ਸੰਭਾਲਣ ਅਤੇ ਵਰਤਣ ਬਾਰੇ ਜਾਣਕਾਰੀ ਵਾਅਦੇ ਅਤੇ ਅਸਿੰਕ ਫੰਕਸ਼ਨ JavaScript ਜਾਣਕਾਰੀ ਵੈੱਬਸਾਈਟ ਤੋਂ ਇਕੱਠੀ ਕੀਤੀ ਗਈ ਸੀ।
- 'ਤੇ ਸੈਕਸ਼ਨ Node.js ਟਾਈਮਰ ਅਤੇ ਬੈਕਐਂਡ ਕੰਟਰੋਲ ਨੂੰ ਸਹੀ ਤਕਨੀਕੀ ਵੇਰਵਿਆਂ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਅਧਿਕਾਰਤ Node.js ਦਸਤਾਵੇਜ਼ਾਂ ਦੁਆਰਾ ਸੂਚਿਤ ਕੀਤਾ ਗਿਆ ਸੀ।