What is the best way to prevent a function from running unnecessarily multiple times?

Whenever I click "About Me" multiple times, the jQuery animation stops as expected. However, if I click "My Portfolio", "Web", "Graphic", and "Others" more than once, the #box1 div keeps moving down endlessly. This might not be noticeable at first, but once you click "About Me" again, the issue becomes apparent.

Is there a way to prevent this from occurring?

If you need to see the code in action, check out this JSFiddle link: https://jsfiddle.net/yg4717a8/1/

Thank you all in advance for your help :)

$(document).ready(function () {
    var hasSlid = false;
    $('a#hide').click(function () {
        $('#box1').animate({
                'top': '+=155px',
                easing: 'easeInOutCubic',
                opacity: 0
            }, 500,
            function () {
                $('#box1').hide();
            });


        $('#container').show();
        hasSlid = false;
    });
});

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

Do JavaScript Promises operate asynchronously?

Can we clarify if JavaScript Promise is asynchronous? I've been researching Promise and async programming, particularly with ajax requests. If Promise isn't inherently async, how can we make it so? For instance, consider a function that encapsul ...

Is it significant if a function within a React component is impure?

Is it acceptable to directly reference a prop in a helper function created to streamline the internal logic of a react component, or is it considered a code smell? Should the prop be passed in as an extra argument to create a pure function instead? Here&a ...

Error message encountered: React hydrate TypeError - the function __webpack_require_.i(...) is not recognized as a

I encountered a webpack TypeError while attempting to use hydrate() in my index.js file. Strangely, the error does not appear when I use ReactDOM.render() instead of hydrate. My intention behind using hydrate was for server-side rendering. src/index.js i ...

How can I manually transclude content within a directive into two separate locations?

When trying to access the result of ng-repeat, I discovered that using the transclude function and manually compiling could help. However, this method does not work in situations with two places and elements containing ng-repeat. Here is how my code is str ...

Is it a good idea to integrate TypeScript with JavaScript before uploading to the server?

Our team has been exclusively using nodejs and writing code in vanilla JavaScript with a .js extension. While everything was running smoothly, we've recently made the decision to switch to TypeScript for our nodejs app development. However, we are fac ...

Exploring JavaScript and Node.js: Deciphering the choice of prototype.__proto__ = prototype over using the

Currently exploring the Express framework for node.js and noticed that all the inheritance is achieved through: Collection.prototype.__proto__ = Array.prototype; Wouldn't this be the same as: Collection.prototype = new Array; Additionally: var ap ...

Display the Vaxis line in a bar graph using Google Chart

Currently, I am involved in a project where I need to display a graph that resembles the one depicted here. To accomplish this task, I am utilizing the Google Visualization Chart API. Successfully, I have managed to generate the chart as illustrated below ...

Social media strife brewing within my WordPress realms

My wordpress website is full of facebook interactions such as og.watch, fb.login, and others. One example is the usage of: for certain buttons, which includes all.js from facebook. This script is placed in the head section. Furthermore, in the head secti ...

What is the way to instruct Mongoose to exclude a field from being saved?

Is there a way in Mongoose to instruct it to not save the age field if it's null or undefined? Or is there a method to achieve this in Express? Express router.put('/edit/:id', function(req, res) { Person.findOneAndUpdate({ _id: req.p ...

Error: The signature for uploading S3 Knox Node.js does not match

For the past several days, I've been attempting to upload a file named message.txt to AWS S3 using knox and node js. However, I continuously encounter an error stating that the signature doesn't match. Here is my code snippet in node js (since ...

"Twice the loading of Meteor templates: once with an undefined collection, and once with it

After searching various resources for solutions to my issue, I stumbled upon this helpful and . Both of these links provided valuable insights. The issue I'm facing is that one of my templates is loading twice - first with the collection undefined, ...

Showing content based on the current date using Javascript

Although I may not be proficient in Javascript, I was able to gather examples and piece together the following code: var date = new Date().getDate(); var greeting; if (date < 24) { greeting = "Nej det är:"; } else { ...

Dynamic loading and endless scrolling in jQuery with advanced filtering functionality

I have a page full of items that I filter by class names. This works great, but when I added lazy loading using ajax, it started causing some issues. Currently, I load the next page of items without applying the filter to the ajax call, and then hide the ...

Discovering images with Selenium's xpath

Here is an example of the HTML code: <image x="128" y="6" width="16" height="16" href="ide/editor/plugin/analytics/images/CollapseAll.png"/> Most of the answers I found were related to the img tag rather than the "image" tag. Below are some options ...

Node.js with Koa: Discontinuation of generator usage on the next step

I am working with a custom object in which I pass a parameter, and then I need to search for all documents in my collection and process them. Here is the code for my custom object: var db = require('../lib/db'); function Widget(n,l,c,o,t,p) { ...

What is the method for adding two elements to an array?

Currently, I am using JavaScript to push elements into an array. As a result, the output looks like this: ["api", "management", "provision", "tenant", "external", "provider"] => Correct Now, after pushing data into the array, I want to append two el ...

php passing values to PHP with hashtags in the URL

When sending a value to a PHP file which includes the character # and other special characters, how can I retrieve the actual value? window.location.href = "somepage.php?w1=" data-target="#myModal1" ; The PHP script returns the value as data-target="! ...

What are some ways to reuse an angular component multiple times?

I am utilizing an angular component to dynamically load charts into my widget: Below is an example of the component: angular.module("generalApp").component("chartPie", { template: "<div class=Pie></div>", bindings: { data: "=", }, control ...

Having trouble with loading JavaScript during ng build --prod process

The JavaScript file I'm using for multiple emails (multiple_emails.js plugin) works well with ng serve. Here is my code: (function( $ ){ $.fn.multiple_emails = function(options) { // Default options var defaults = { ...

Using React to dynamically render a specific quantity of components

How can I dynamically display a certain number of Star components (MUI component) based on the points a user has earned (this.state.points)? I'm unsure of the correct approach to achieve this. import React, { Component } from "react"; impor ...