What is the best way to find out if an array index is within a certain distance of another index?

I'm currently developing a circular carousel feature. With an array of n items, where n is greater than 6 in my current scenario, I need to identify all items within the array that are either less than or equal to 3 positions away from a specific index (currentIndex) in a circular manner:

//  currentIndex = 0
//  i       0    1    2    3    4    5    6    7    8    9   
// --------------------------------------------------------
// offset   0   +1   +2   +3   +3   +3   +3   -3   -2   -1

Using the example above, with 0 as the currentIndex, indices 1, 2, and 3 are within 3 places of currentIndex. Similarly, indices 7, 8, and 9 are also within 3 positions in a circular fashion relative to currentIndex. Any other indices outside this range are considered to be at a value of 3. These positive and negative values will later correspond to positions on the screen.

To calculate the offset position of a given index in relation to the currentIndex, I've implemented the following function:

function getOffset(currentIndex: number, index: number, length: number) {
  const diff = index - currentIndex;

  if (diff === 0) {
    return 0;
  } else if (diff < 0) {
    if (diff < -3) {
      return Math.min(length - currentIndex + index, 3);
    } else {
      return Math.min(diff, 3);
    }
  } else {
    if (diff < length - 3) {
      return Math.min(diff, 3);
    } else {
      return Math.max(diff - length, -3);
    }
  }
}

// getOffset(0, 0, 10) -> 0
// getOffset(0, 1, 10) -> 1
// getOffset(0, 9, 10) -> -1
// getOffset(0, 6, 10) -> 3

The algorithm functions correctly but may seem verbose. Is there a more streamlined approach to achieve the same outcome?

Answer №1

Give this code snippet a try:

function calculateOffset(currentIndex, index, length) {
  const difference = (index - currentIndex + length) % length;
  if (difference <= 3) {
    return difference;
  } else if (difference >= length - 3) {
    return difference - length;
  } else {
    return 3;
  }
}

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

Issue encountered in AngularJS while configuring resources for the action `query`: Anticipated response was an object, but received an array instead

I've been attempting to utilize Angular 1.3 to access a REST service, but I keep encountering an error stating "Error: error:badcfg Response does not match configured parameter". My suspicion lies in the controller where I invoke $scope.data. Even th ...

box tick does not alter appearance

I've been struggling with this seemingly simple issue for an hour now. I have a radio button set up with two buttons: <input class="form-control icheck" id="cash_prize" name="cash_prize" type="radio" value="1" style="position: absolute; opacity: 0 ...

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this? ...

Issue on Heroku with Discord.js displaying a "Service Unavailable" message

Encountered a strange error while trying to launch my discord bot on heroku. Previously, I implemented a command handler for the bot to organize commands in separate files but faced multiple code errors. With the help of a member from this community, all e ...

Disabling the past dates on a date picker based on the selected date from another date picker

Is it possible to disable past dates in the End Date picker based on the selected date in the Start Date picker? For example: If I choose 20th November 2019 as the Start Date, I want to prevent selection of any past dates in the End Date picker. <ht ...

Unexpected TypeError occurred when trying to Fetch data from an Express Server hosted on Window object

Error Message : Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Invalid name Feeling stuck as I looked around, unsure of what's causing this issue. My goal is to develop a website that can eventually make a ...

A possible invocation of a function using a JavaScript "class"

Presented here is a node module I've been working on: var _ = require('lodash'); function Config(configType, configDir) { this.configType = configType; this.configDir = configDir; }; Config.prototype.read = function() { // read file t ...

No content appearing instead of AngularJS code displayed

My goal is to retrieve data from a MySQL database using PHP and then pass that data in JSON format to AngularJS for display in a table. The HTML code looks like this: <body ng-app="myModule"> <div class="row"> <div class="col-lg-12 ...

Is there a convenient HTML parser that is compatible with Nativescript?

I have tested various libraries like Jquery, Parse5, and JsDom, but unfortunately they are not compatible with nativescript. Jquery relies on the DOM, while Parse5 and JsDom require Node.js which is currently not supported by nativescript. I am in need of ...

"Jest test.each is throwing errors due to improper data types

Currently, I am utilizing Jest#test.each to execute some unit tests. Below is the code snippet: const invalidTestCases = [ [null, TypeError], [undefined, TypeError], [false, TypeError], [true, TypeError], ]; describe('normalizeNames', ...

Is there a way to verify if a React hook can be executed without triggering any console errors?

Is there a way to verify if a React hook can be invoked without generating errors in the console? For example, if I attempt: useEffect(() => { try { useState(); } catch {} }) I still receive this error message: Warning: Do not call Hooks i ...

Image remains fluid within a static div without resizing

Any assistance would be greatly appreciated. I am currently facing an issue with a fixed div that is floating at the bottom of the screen, serving as ad space for the mobile version of a website. The problem arises when attempting to resize the browser win ...

Tips for establishing and connecting numerous connections among current nodes using the same criteria

While browsing StackOverflow, I came across similar questions. However, I believe this one has a unique twist. The main issue at hand is: How can I establish multiple relationships between existing nodes? I have the following code snippet: session . ...

What is the proper way to delete a callback from a promise object created by $q.defer() in AngularJS?

When working with AngularJS, the $q.defer() promise object has the ability to receive multiple notify callbacks without overwriting previous ones. var def = $q.defer(); def.promise.then(null, null, callback1); def.promise.then(null, null, callback2); If ...

Create a new division directly underneath the bootstrap column

Imagine having a bootstrap table like this: https://i.sstatic.net/kXHiP.jpg Now, if you want to click on a column and open a div with more details below it, is it achievable with CSS or JavaScript? https://i.sstatic.net/HIfkK.jpg I tried using the Metr ...

Is there a way to validate user input in the front-end using my ANTLR grammar implemented in the back-end?

I have implemented a system using the ANTLR parser in Java for the backend of our software (frontend in Angular 2+). While the connection between the frontend inputs and backend logic is working well, there is a concern that users may input data with typos ...

Is it possible for me to overlap a text over hidden text, and if the hidden text becomes visible through JavaScript, my text will shift to the right of the now visible hidden text?

I'm currently working on a website for a company that requires users to complete all the information before proceeding. To achieve this, I created a form with the following code: <form action="Owners Infoback.php" onsubmit="return validateFo ...

Error involving key mismatch between TypeScript inherited interface and literal string type

There are 3 interfaces (A, B, and C) that all extend from a shared interface (Common). Additionally, there is a container type which holds arrays of these 3 interfaces (Container). The goal is to select one of the arrays and extract a common property from ...

Is there a way to listen for the validation of an HTML5 form before it is submitted?

I've been trying to figure out a way to detect if a form has been validated, but so far, no luck. For example: User clicks the submit button The form is invalid, so the submit event doesn't occur At this point, I want to add the class .form-fe ...

Setting the value of an <h1> element using data from an API response - A simple guide

I have been attempting to update the title of a page using data from an API. Here is my HTML: <h1 id='league_name'></h1> This is my JavaScript code: <script> fetch('https://api.example.com') .then(response ...