Tips for making a reusable function that utilizes alternating if statements

Question

Tips for making a reusable function that utilizes alternating if statements

After hours of experimenting, I finally achieved a smooth scrolling effect with a bounce at the top and bottom. Now, my challenge lies in creating reusable and clean code for this implementation. Perhaps implementing an algorithm could solve this issue?

The main issue I'm facing is switching between <= and >=. While I've cleaned up the code to the best of my abilities, I feel there's room for improvement (please let me know if you spot any).

I'm looking to encapsulate this functionality within a reusable function, like so:

function reusableFunction() {
    ...
    if (num1 >= num2) // One case I have to compare like this
    if (num1 <= num2) // Another case, I have to compare like this
    ...
}

My progress halted at line #86 in the function bounceBack. If you have suggestions for creating a smoother scrolling and bouncing effect, please share them below. Note that I prefer not to rely on libraries or frameworks like JQuery.

JSFiddle

[Insert your JavaScript code here]

[Insert your CSS code here]

[Insert your HTML code here]

javascript css algorithm math

Answer 1

Answer №1

When it comes to personalizing a function, such as using the <= operator, one option is to utilize another function. For example, if you want to customize a statement like:

if (a <someFunction> b){
  // ...
}

where someFunction could be either <= or >, one approach is:

function customFunc(a,b,conditionsMet){
  return conditionsMet ? a <= b : a > b;
}

and then invoke it like this:

if ( customFunc(a,b,are conditions met?) ){
  // ...
}

(If this doesn't align with what you're looking for, please let me know in the comments.)

Answer 2

When it comes to personalizing a function, such as using the <= operator, one option is to utilize another function. For example, if you want to customize a statement like:

if (a <someFunction> b){
  // ...
}

where someFunction could be either <= or >, one approach is:

function customFunc(a,b,conditionsMet){
  return conditionsMet ? a <= b : a > b;
}

and then invoke it like this:

if ( customFunc(a,b,are conditions met?) ){
  // ...
}

(If this doesn't align with what you're looking for, please let me know in the comments.)

Tips for making a reusable function that utilizes alternating if statements

JSFiddle

Answer №1

Similar questions

What seems to be the issue with my 2-column design layout?

Loading images in advance using JavaScript

Using flex and align properties to position two elements on the right and one on the left is a common layout challenge

The issue with Node.js arises when attempting to access data within a nested fs.readFile call

AJAX cached outcomes

Service's read-only attribute

Altering the dimensions of radio buttons

:active state not functioning correctly

Customize Your Lists in Wordpress to Reflect Your Unique Style

Using TypeScript to automatically determine the argument type of a function by analyzing the return type of a different function

Using jQuery to crop an SVG view box

What steps should I follow to utilize my spotify api token effectively?

The button event is currently only targeting the initial class. (Jquery)

"Implement a feature where HTML elements trigger a function instead of using the

Encountered Runtime Issue of TypeError: undefined cannot be iterated (unable to access property Symbol(Symbol.iterator))

Service workers do not support fetching from .html files

Toggle Class Based on Scroll Movement

What steps can be taken to ensure the random generator continues to function multiple times?

Mastering Data Transfer in jQuery: A Guide to Migrating Event Information from .on(dragstart) to

Making modifications to the CSS within an embedded iframe webpage