Running a function following the completion of an animation with setTimeout

Recently stumbled upon this cool code snippet on stack overflow http://codepen.io/anon/pen/LERrGG.

I see a lot of potential in this pen, but the one drawback is the lack of functionality to execute a function after the timer expires. I've been trying to figure out how to solve this without any luck.

Can someone help me modify the code so that it can be utilized as a timer that 'runs out'?

(function animate() {
  theta += 0.5;
  theta %= 360;
  var x = Math.sin(theta * Math.PI / 180) * radius;
  var y = Math.cos(theta * Math.PI / 180) * -radius;
  var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
  timer.setAttribute('d', d);
  setTimeout(animate, t)
})();

Answer №1

To confirm that a full circle has been painted, you can check if the value of theta becomes smaller than its initial value:

(function animate() {
  var oldTheta = theta;
  theta += 0.5;
  theta %= 360;
  if (theta < oldTheta) {
    // Indicates completion of circle
  }
  else {
    var x = Math.sin(theta * Math.PI / 180) * radius;
    var y = Math.cos(theta * Math.PI / 180) * -radius;
    var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
    timer.setAttribute('d', d);
    setTimeout(animate, t);
  }
})();

Answer №2

Make sure to verify whether theta is less than 360.

  (function move() {
  theta += 0.5;
  var x = Math.sin(theta * Math.PI / 180) * radius;
  var y = Math.cos(theta * Math.PI / 180) * -radius;
  var path = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
  timer.setAttribute('d', path);
 if(theta<360) setTimeout(move, t);
 else accomplishTask();
})();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If a user touches outside of the scroll component on mobile, the scroll in the popup freezes

I have a webpage that includes two scrollable lists: one in the main body and another in a popup window. To prevent scrolling of the main body when the user scrolls inside the popup, I am using a standard solution recommended in this Stack Overflow post ab ...

Clicking on a new tab causes the page to quickly scroll back to the top (jQuery Tabs

Currently, my website is utilizing jQuery tabs with AJAX functionality. Here is the HTML code: <div id="tabs"> <ul> <li><a id='tab-1' href="/get-1.htm">1</a></li> <li><a id=' ...

"The fascinating world of asynchronous JavaScript: Promises and Del

I've been diving into Promises, but I'm a bit confused by this code snippet. Can you help clear things up for me? const promise = new Promise((resolve, reject) => { console.log('Promise started') resolve('Success') }) ...

Tips for transferring array values to PHP through AJAX?

I am attempting to send data to the database via AJAX. I have an array with values that need to be passed to PHP using AJAX in order to display related records. <form id="search-form" method="POST"> <input value="4869" name="compare_id[]" type= ...

Converting a Disable submit button from jQuery to alpinejs: A Step-by-Step Guide

Is there a way to convert the disabling of a submit button using jQuery to Alpine.js? The Code : <form> <input type="text" class="input-field" placeholder="Enter you name *" value="" /> <button ty ...

I have encountered an asynchronous operation in Node JS that is not resolving. Can someone please explain how I can utilize a worker thread to terminate it?

Imagine having an asynchronous operation like this: async () => { await longTask().then(result => console.log(result)); } Assume that the longTask function is unpredictable. It can sometimes hang and not resolve. It's a known fa ...

How can I convert text containing in Node.js and insert actual new lines instead of the character?

I'm trying to transform a text response by removing special characters like \n and turning them into actual new lines. The initial response contains special characters -----BEGIN MESSAGE----- v1.60 hQEMAwPgeMJUXSL5Bps+U3lC8tnc D8s2Aeb7UtryIRAB ...

Detecting onclick on a model in three.js: A simple guide

I am curious if there is a method in three.js that allows users to click on a model (such as an imported gltf file from Blender) and trigger another action upon the click, such as displaying a pop-up box or an image. I attempted to search for this feature ...

The media print is not displaying correctly when attempting to print with JavaScript

I am attempting to print a div using the following javascript code: var divToPrint = document.getElementById(curid); var newTab = window.open('', 'Print-Window'); newTab.document.open(); newTab.document.write('<h ...

Exploring angularjs and the concept of variable scoping in relation to

Struggling with variable binding in my angularjs/javascript code for uploading images. Can someone help me out? Here is the snippet of my code: var image_source; $scope.uploadedFile = function(element) { reader.onload = function(event) { image_sourc ...

The combination of subtracted geometries creates unusual lighting effects

When working with three.js, I have been experimenting with the concept of cutting out a window from a box geometry, which represents a wall. I came across a helpful csg (constructive solid geometry) extension on this GitHub repository. After successfully ...

AngularJS does not recognize a dynamically created array when using ng-include with ng-repeat

Issue with ng-repeat Directive I have encountered a problem where the ng-repeat directive does not track the addition of a new array, specifically 'options'. This issue arises when the directive is used within a template displayed using ng-dialo ...

DataTable failing to refresh after updating data

I'm facing a challenge in re-initializing a DataTable within my Vue.js application after updating the data. Below is the snippet of code I am using: template : . <table ref="tableUtamaAlamat" id="tableUtamaAlamat" class=" ...

Unable to execute the new firebase on node server

I'm currently watching this google talk. However, I am facing an issue trying to create a firebase object. Following my package.json file, I initiated with: npm install firebase --save Then proceeded with the following steps: let Firebase = requir ...

Passing various length values in AngularJS using stateParams

I am facing an issue with passing values of different lengths to the same state: For instance <li href="#/app/list/value1"> <li href="#/app/list/value1/value2"> Within my state definition, I have the following .state('app.list', ...

Node.js data transmission: Sending information from server to client

In my node project, PUG/Jade files are used to render webpages. Every minute, a JS file updates a redis database and I want the GUI to reflect these changes without requiring a page refresh. Here is an overview of how the data is currently passed: User ...

Generating HTML within controller actions

I am struggling to make a decision on whether it is acceptable to generate HTML in controller actions and return this HTML to AJAX calls from my view using jQuery. For example, when choosing a client through jQuery Autocomplete, in addition to retrieving ...

Tips for maintaining a border between divs in a bootstrap layout

I have a box positioned on the left side of the screen and a large div element placed adjacent to it. I am looking to enclose both of these elements within a square-shaped border in a light color. How can I achieve this effect? Additionally, I have include ...

When making an Ajax request to a webpage, you may receive both a success message and an

I attempted to initiate an ajax call to successtext.html located on my computer. However, upon checking my browser's console, I noticed that both success and error messages were displayed. Here is the script I used: <script type="text/javascript"& ...

Creating a Gap in R Shiny Interface Between Two Data Tables

I am currently working with R and Shiny, and I am attempting to display two dataTableOutput elements next to each other. To accomplish this, I am utilizing the fluidRow column feature, but I need to further customize the width of these two tables. Here is ...