۱۹
خرداد

جلسه ۲۶ : API تایمر در D3.js

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در جلسه بیست و پنجم از آموزش های دوره D3.js به مبحث API تایمر در D3.js می پردازیم. ماژول API تایمر برای انجام انیمیشن های همزمان با تاخیر زمانی هماهنگ استفاده می شود. requestAnimationFrame برای انیمیشن استفاده می شود. در این فصل ماژول API تایمر در D3.js توضیح داده شده است.

متد انیمیشن API تایمر در D3.js

requestAnimationFrame

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

تنظیم تایمر در D3.js

ما با استفاده از اسکریپت زیر می توانیم به راحتی تایمر را از d3js.org بارگیری کنیم.

مثال :

<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script>
   var timer = d3.timer(callback);
</script>

var timer = d3.timer(callback);

</script>

متدهای API تایمر

API تایمر از متدهای مهم زیر پشتیبانی می کند. همه این موارد به صورت زیر شرح داده شده است.

()d3.now

این متد زمان فعلی را باز می گرداند.

([[d3.timer(callback[, delay[, time

این متد برای برنامه ریزی یک تایمر جدید استفاده می شود و تایمر را تا زمانی که متوقف نشده فراخوانی می کند. شما می توانید یک تاخیر عددی را در MS تنظیم کنید، این ویژگی اختیاری است، و به صورت پیش فرض صفر است. اگر زمان مشخص نباشد، به عنوان ()d3.now در نظر گرفته می شود.

([[timer.restart(callback[, delay[, time

تایمر را با فراخوانی مشخصی Restart می کند و گذاشتن تاخیر و زمان اختیاری است.

()timer.stop

این متد تایمر را متوقف می کند و از فراخوانی های بعدی پیشگیری می کند.

([[d3.timeout(callback[, delay[, time

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

([[d3.interval(callback[, delay[, time

این متد در یک فاصله زمانی با تاخیر زمانی خاص مورد استفاده قرار می گیرد. اگر تاخیر مشخص نباشد، زمان تایمر را می گیرد.

مثال : صفحه وب با نام “timer.html” ایجاد کنید و اسکریپت زیر را به آن اضافه کنید.

مثال :

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Timer API </h3>
      <script>
         var timer = d3.timer(function(duration) {
            console.log(duration);
            if (duration > 150) timer.stop();
         }, 100);
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3> Timer API </h3>

var timer = d3.timer(function(duration) {

console.log(duration);

if (duration > 150) timer.stop();

}, 100);

</script>

</body>

</html>

در نهایت پاسخ زیر را بر روی صفحه نمایش خواهیم دید.

API تایمر در D3.js

کلام آخر

آموزش API تایمر در D3.js به اتمام رسید. امیدوارم از مطالب ذکر شده بهره کافی را برده باشید با ما همراه باشید تا در جلسه بعد یک مثال کاربردی با D3.js را فرا بگیرید.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)