Ways to halt a message callback?

Looking at some lines of code from a canvas sprite animation on GitHub, I am curious about how to stop the animations once the sprite has finished.

window.requestAnimFrame = (function(callback) { // Function for handling animation frames
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

function animate() { // Animation loop that draws on the canvas
  context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clearing the canvas
  spriteMap.draw(context, 100, 100); // Drawing the sprite
  requestAnimFrame(animate); // Running the animation loop
}

https://github.com/IceCreamYou/Canvas-Sprite-Animations

Answer №1

To end the animation, utilize cancelAnimationFrame() along with the request ID that is generated by requestAnimationFrame():

var reqId;

function animate() {
  // ...
  reqId = requestAnimFrame(animate); // generates a request ID
}

When you want to stop the animation:

cancelAnimationFrame(reqId);

If you are utilizing a polyfill, make sure to add the polyfill for cancelAnimationFrame():

if (!window.cancelAnimationFrame)
  window.cancelAnimationFrame = function(id) {
    clearTimeout(id);
  };

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

Utilizing the NODE_ENV variable in a Windows 10 npm script

I have integrated webpack into a Typescript project. Following a helpful tutorial, I created 3 separate webpack configuration files: webpack.common.js webpack.production.js webpack.development.js In the tutorial's package.json, the "scripts" sectio ...

utilizing vueJS for global notifications

It may sound like a cliché question, but I still haven't grasped it. I have a primary component that is always loaded in the application. Let's refer to it as DefaultContainer.vue <template> <div class="app"> .... Notifi ...

Ways to customize the appearance of an iframe's content from a separate domain

I am facing a challenge with my widget and multiple websites. The widget is hosted on one domain, but the websites use an iframe to display it. Unfortunately, because of the Same Origin Policy, I cannot style the content of the iframe from the parent websi ...

Enhancing HTML with VueJS and managing imports

After successfully developing a Single Page Application using VueJS, I realized that the SEO performance was not up to par. To combat this, I decided to create a standard HTML website with some pages incorporating VueJS code (since my hosting environment d ...

Populating a two-dimensional array with randomly generated numbers using javascript

Apologies if this has been asked before, but I couldn't find any previous posts on the topic as I'm still fairly new to this site! Lately, I've been exploring game development using HTML5 and JavaScript and have gotten into creating tileset ...

Press and hold feature using CSS or JavaScript

When working with a jQuery draggable element, my objective is to change the cursor to a move cursor when clicking and holding the header. I have attempted using CSS active and focus properties, but so far no changes are taking place. ...

Conditional ngOptions in AngularJS allows you to dynamically update the options

Currently, I am working with a select box that iterates through an array of departments to identify eligible parent departments. <select class="editSelectBox" ng-model="dept.parentDepartment" ng-options="dept as dept.name for dept in depts track by de ...

What is causing the malfunction in this straightforward attrTween demonstration?

Seeking to grasp the concept of attrTween, I am exploring how to make a square move using this method instead of the simpler attr approach. Despite no errors being displayed in the console, the following example does not produce any visible results, leavin ...

jQuery's Multi-Category Filter feature allows users to filter content

I have been working on creating a filter function for my product list. The idea is that when one or more attributes are selected, it should fade out the elements that do not match. And then, if a filter is removed, those faded-out items should fade back in ...

Struggling to pass express.js router requests and responses to a class method

I am struggling with setting up an Express JS router. I am facing difficulty passing req and res to my class method. Not Working app.get('/', controller.index) Working app.get('/', (res,req) => controller.index(req,res) The routi ...

Storing Canvas Jquery data in an ASP.NET C# database

I need assistance with saving canvas (signatures) created using Asp.Net webforms and JQuery into a SQL server database. Can anyone provide suggestions on how I can achieve this? What type of field should I use to store it in the database? ...

Viewing saved information prior to saving - JavaScript

I'm looking for a solution to allow users to preview captured records before they are inserted. Any suggestions on how to achieve this? HTML.html <form id="view" method="POST" class="formular"> <label>Name</label> ...

Error authorizing AJAX call to Gmail API

I'm just getting started with the GMail API and I'm attempting to use AJAX to fetch emails. This is my code: $.ajax({ beforeSend: function (request) { request.setRequestHeader("authorization", "Bearer xxxxxxxxxxxxxxxxx.a ...

The absence of the 'profileStore' property is noticed in the '{}' type, which is necessary in the 'Readonly<AppProps>' type according to TypeScript error code ts(2741)

I'm currently using MobX React with TypeScript Why am I getting an error with <MainNote/>? Do I just need to set default props? https://i.stack.imgur.com/5L5bq.png The error message states: Property 'profileStore' is missing in typ ...

Error encountered: Attempting to wrap MuiThemeProvider in App resulted in an invalid hook call

Whenever I include MuiThemeProvider in App.js, I encounter an error that prevents the page from loading. This issue is puzzling to me since I have utilized it successfully in other projects. react.development.js:1476 Uncaught Error: Invalid hook call. Ho ...

``From transitioning from Django templating to implementing a full RESTful architecture?

Looking to convert my django/html/css website to a REST (json) structure. Previously reliant on django template rendering for frontend responses. Interested in how to manage url redirection and incorporate json data into html templates without the use of ...

Managing the React Router component as a variable

I'm currently working on integrating React-Router into an existing React app. Is there a way to use react-router to dynamically display components based on certain conditions? var displayComponent; if(this.state.displayEventComponent){ {/* ...

Learn the process of utilizing Javascript to substitute additional texts with (...) in your content

I am facing a challenge with a text field that allows users to input text. I want to use JavaScript to retrieve the text from the textbox and display it in a paragraph. However, my issue is that I have set a character limit of 50. If a user exceeds this li ...

Is there a way to insert a row into a datatable without needing to perform an Ajax reload or using the

When using row.add(…) on a datatable, I encounter an issue where it refreshes via an ajax call when draw() is activated. This leads to the new row not being visible because the data is reloaded from the database. The UX flow behind this scenario is as f ...

In the following command, where is the PORT stored: ~PORT=8080 npm App.js?

section: Let's consider the following code snippet located in the App.js file: console.log(`This is the port ${process.env.PORT}`); Is there a method to retrieve the value of PORT from outside the running process? ...