Attempting to utilize the setInterval function in Ionic 4 to invoke a specific function every second, unfortunately, the function fails to execute

Working with Ionic 4 has been a breeze for me. Recently, I encountered a situation where I needed to update the value of an ion-range every second by invoking a function. However, despite successfully compiling the code, the changeMark function never seemed to get called.

Below is the HTML code snippet:

 <ion-range color="light" pin="false" min="0" max="100" [(ngModel)]="sliderValue">

 </ion-range>  

And here is my TypeScript code snippet:

  export class UpdatePlayer implements OnInit {

  get_duration_interval: any;
  sliderValue: any;

  constructor(public modalController: ModalController) { }

 ngOnInit() { }

 play() {
   ....

   this.get_duration_interval = setInterval(this.changeMark(), 1000);
 }

 changeMark(): any {
this.sliderValue = (this.audio.currentTime / this.maxDuration) * 100;
    this.currentDuration = this.fmtMSS(parseInt(this.audio.currentTime));
    console.log('playing time Value : ' + this.audio.currentTime);
 }

 }

Answer №1

Success! With just a simple modification to the code, I was able to find a solution. Below is the updated code snippet which now triggers the changeMark function every second as intended:

 From: this.get_duration_interval = setInterval(this.changeMark(), 1000);


    To:  this.get_duration_interval= setInterval(()=> { this.changeMark() }, 1000);

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

A different component experiences an issue where Angular Promise is returning undefined

This is the carComponent.ts file containing the following method: async Download() { try { const settings = { kit: true, tyres: true, serviced: false, }; const [kits, tyres] = await Promise.all([ this.c ...

Sending enums as arguments to a function

Is there a way to create a function that can work with any enum and function that accepts it as an argument? Consider the following scenario: enum Enum1 { VALUE1 = "value1" } enum Enum2 { VALUE2 = "value2" } const func1 = (e: Enum1) => e; const f ...

Is it possible to expand the Angular Material Data Table Header Row to align with the width of the row content?

Issue with Angular Material Data Table Layout Link to relevant feature request on GitHub On this StackBlitz demo, the issue of rows bleeding through the header when scrolling to the right and the row lines not expanding past viewport width is evident. Ho ...

Can a form be submitted using ViewChild in Angular5?

Can a form be submitted using ViewChild in Angular5? If so, how can it be achieved? I attempted to do this but was unsuccessful My Attempt: <form #form="ngForm" (submit)="submitForm(form)" novalidate> <input required type="text" #codeReques ...

Generating Tree Structure Object Automatically from Collection using Keys

I am looking to automatically generate a complex Tree structure from a set of objects, with the levels of the tree determined by a list of keys. For example, my collection could consist of items like [{a_id: '1', a_name: '1-name', b_id ...

The importance of handling undefined values in TypeScript and React

There is a condition under which the IconButton element is displayed: {value.content && <IconButton aria-label="copy" onClick={() => copyContent(value.content)}> <ContentCopy /> </IconButton> } However, a ...

Creating a mapping for a dynamic array of generic types while preserving the connection between their values

In my code, I have a factory function that generates a custom on() event listener tailored to specific event types allowed for user listening. These events are defined with types, each containing an eventName and data (which is the emitted event data). My ...

Exploring the usage of arrays within Angular 4 components. Identifying and addressing overlooked input

I'm struggling with array declaration and string interpolation in Angular 4 using TypeScript. When I define the following classes: export class MyArrayProperty { property1: string; property2: string; } export class MyComponent { @Input() object: ...

Revamping Tab Styles with CSS

Currently, I am working on a mat tab project. The code snippet I am using is: <mat-tab-group> <mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab> </mat-tab-group> If you want to see the liv ...

How can I make the navbar in Angular stay fixed in place?

After using the ng generate @angular/material:material-nav --name=home command to create a navbar, I am trying to make it fixed at the top while scrolling. I attempted using position: fixed; on my mat-sidenav-content but it didn't work. Does anyone ha ...

Navigating the Angular Element: A Guide to Clicking Buttons within Modal-Dialogs Using Protractor

I am currently creating an automation test for an angular application using the protractor framework. Test scenario: Click on the "Create PDF Report" button A modal-dialog window will appear Click on the "Run Report Now" button within the modal-d ...

Launching React Native in Visual Studio Code: launchReactNative.js

Struggling to get visual studio code to create the launchReactNative.js file in the ./vscode directory. I've been attempting to configure a react-native project with typescript on visual studio code to debug typescript files, but all my efforts have ...

angular 2 checkbox for selecting multiple items at once

Issue I have been searching for solutions to my problem with no luck. I have a table containing multiple rows, each row having a checkbox. I am trying to implement a "select all" and "deselect all" functionality for these checkboxes. Below is an example o ...

Angular encountering a 405 Method not allowed error along with the "Provisional Headers are shown" message

It's really frustrating me. I'm attempting to make a simple request to my api server by adding the header, but it keeps showing me the message "Provisional Headers are shown" and then fails on the subsequent request. Provisional headers are sho ...

Unable to log in with password after hashing using React, NodeJS, and mySQL

I've implemented a salt and hash function to secure my password. Strange thing is, I can't log in using the original password, but it works when I use the hashed password from the database. Salt: "HashedPasswordCheck" Hash Function: function has ...

Leverage glob patterns within TypeScript declaration files

Utilizing the file-loader webpack plugin allows for the conversion of media imports into their URLs. For example, in import src from './image.png', the variable src is treated as a string. To inform TypeScript about this behavior, one can create ...

What is a way to execute a series of requests using rxjs similar to forkJoin and combineLatest, without needing to wait for all requests to finish before viewing the results?

Consider you have a list of web addresses: urls: string[] You create a set of requests (in this instance, utilizing Angular's HTTPClient.get which gives back an Observable) const requests = urls.map((url, index) => this.http.get<Film>(url) ...

Upon initialization, navigate to the specified location in the route by scrolling

My page has various components stacked one after the other, such as: <about></about> <contact></contact> I am utilizing the ng2-page-scroll to smoothly scroll to a particular section when a navigation link is clicked. However, I a ...

Using string replacement for effective search finding: Unleashing the power of substring matching

I have a method that adds an anchor tag for each instance of @something. The anchor tag links to a specific sub URL. Check out the code: private createAnchors(text: string) { return text.replace(/(@[^ @]+)/ig, '<a href="/home/user/$1">$1& ...

What is the process for inserting a new element into an Array-type Observable?

I've been working on the Angular Tour of Heroes example and I have a feature where users can add new heroes to the existing list. Here's my add hero method in hero.service.ts: addNewHero(hero : Hero) : Observable<Hero> { console.log(her ...