I am using class-binding to apply class to a div inside ng-template like this,
<div #mobileTrialSection class="mobile-trial-section hidden-lg hidden-xl" [class.is-touching]="utils.isTouching( mobileTrialSection, null, 100 )">
<div class="heading">Your trial. Free and easy.</div>
<ul class="features">
<li>Full access for 14 days</li>
<li>No credit card required</li>
</ul>
</div>
The class I am binding is is-touching,
This method (isTouching) is called like hundereds of times which I don't like because it can cause performance issues, I want to throttle this by 200ms.
The method is as following:
isTouching( dynamicDiv: HTMLElement, referenceDiv: HTMLElement, offset: number = 0, className = 'is-touching', refSelector = null ): boolean {
if (!referenceDiv) {
if (refSelector) {
referenceDiv = document.querySelector(refSelector);
} else {
referenceDiv = dynamicDiv.parentElement.previousElementSibling as HTMLElement;
}
}
if ( !dynamicDiv.classList.contains( className ) ) {
return ( dynamicDiv?.getBoundingClientRect().top - referenceDiv?.getBoundingClientRect().bottom ) < offset;
}
return ( window.innerHeight - dynamicDiv?.offsetTop - dynamicDiv?.offsetHeight ) < offset;
}
Besides the logic, is there any other (better) way to bind class so using method so that it does not affect performance.
NOTE: In different scenarios where I want to throttle methods, I use pipes but this case is different and I don't know how to throttle such scenario. Constructive critisim would be appricieated.
