سوال فنی

من الان امتحان کردم و ++x رو درون یک شرط گذاشتم و مشکل برطرف شد ولی مشکل افزایش سرعت با هر بار کلیک برطرف نشد 

        let circle = mybutton.childNodes[1];
        let x = 0;

        function animateToRight() {
            let intID = requestAnimationFrame(moveCircle);
        }
        // a = timea * 100
        function moveCircle(a) {
            if (x < 438) {
                x++;
            }
            circle.style.transform = `translate3d(${x}px,0,0)`
            if (x < 438) {
                requestAnimationFrame(moveCircle);
            }
        }

این مورد رو هم به انتهای کد اضافه کردم برای بازگشت دایره به ابتدا و آیا این کار صحیح است ؟

           if (x == 438) {

                circle.style.transform = `translate3d(0,0,0)`
                // circle.style.transform = "";

            }

سلام

لطفا کدتون را به طور کامل به سوال پیوست کنید و توضیح بدید که دقیقا چه هدفی دارید تا بتونیم راهنمایی کنیم.

تا اینجا شرطی که گفتین روی ۴۲۰ پیکسل گذاشتین را توی کدتون ندیدم!

و داخل تابع moveCircle هم ۲ بار یک شرط را تکرار کردید که خیلی کار درستی نیست.

هدف از کد پیوست : 
1 :  عبور نکردن دایره متحرک  از مرز دکمه با چندین بار کلیک پست سر هم 

2: بازگشت دایره به جای اولیه 

3: کارکردن تابع  onclick به صورت متوالی بدون نیاز به refresh  (که راه حلی پیدا نکردم )

و یک سوال : 

دلیل اینکه با هر بار کلیک روی دکمه که تابع در اون اجرا شده سرعت انیمیشن افزایش پیدا میکنه چیه و چطور میشه جلوی اون رو گرفت  

استاد این کدی هست که نوشتم و با توجه به نکته ایی که فرمودید دو بار یک شرط را تکرار کرده بودم را اصلاح کردم و آخر کد این رو اضافه کردم بعد از اتمام برگرده به اول دکمه ولی مشکلی که هست تابع  onclick فقط یک بار اجرا میشه و reset نمیشه و البته توی اینترنت سع کردم سرچ کنم که ظاهرا باید از تابع reset استفاده کنیم ولی امتحان که میکردم کار نمیکرد 

سلام دوست عزیز
علت افزایش سرعت حرک با کلیک های بعدی اینه که با ه بار کلیک شما مجددا تابع animateToRight رو صدا میزنی و مجددا داری تایمر ست میکنی. 
فرض کن یه نفر دره یه جعه رو هل میده و حالا با این کار شما میشن چند

فر.

’

سلام دوست عزیز
علت افزایش سرعت حرکت با کلیک های بعدی اینه که با هر بار کلیک شما مجددا تابع animateToRight رو صدا میزنی و مجددا داری تایمر ست میکنی. 
فرض کن یه نفر داره یه جعبه رو هل میده و حالا با این کار شما میشن چند نفر.

الان فرضا بخاطر کلیک اولی که انجام دادی تایمری که ست کردی از زمان  t=1  شروع بشه و تقریبا هر 4ثانیه callback  رو اجراء بکنه. یعنی در زمان های 1 و 5 و 9 و 13  و 17 ... با فراخوانی translate3d هر بار یک پیکسل پیشروی داشته باشیم.

حالا مثلا شما در زمان  t=11 مجددا کلیکی کرده باشی و بخاطر همین کار شما دوباره تابع animateToRight فراخونی میشه و مجددا تایمر جدیدی تنظیم میشه (مستقل از قبلی) . در نتیجه از این به بعد شما فرضا در زمانهای 11و 15و19 ... هم تابع translate3d رو فراخوانی میکنی و پیشروی هایی مستقل از کلیک قبلی خواهی داشت.

اگه به نمودار عکس پیوستی نگاه کنی توی اون فراخوانی های translate3dحاصل از هرکدوم از این کلیک ها رو نشون دادم.

 حالا میبینی که در واقع ما داریم فراخوانی تابع translate3d رو از زمان11 ثانیه به بعد با فاصله کوتاه تری انجام میدیم و این یعنی سرعت بیشتر.

هرچی بیشتر کلیک کنیم این نمودار شلوغتر میشه و فواصل کوتاهر و سرعت بیشتر.