Firing two functions from an event listener (one throttled, the other not)

I have an event listener for scroll events that fires a function responsible for appending an element to the viewport. That same scroll event listener is being throttled to prevent a downpour of scroll events (more manageable). The library being used to throttle is throttle-debounce. Problem: throttling handlePageScroll is throttling everything contained in that method (of course).

Code:

componentDidMount() {
  window.addEventListener('scroll', throttle(2000, this.handlePageScroll));
}

handlePageScroll = () => {
  someFn() // logic for appending an element, does not need throttling
  this.loadNextBatch(); // logic that actually needs to be throttled
};

I’ve tried throttling from within handlePageScroll with no success. Is there way to fire two functions from an event listener?
Thank you in advance.


Source: stackoverflow-javascript

Live update of rgba using clientX/clientY?

The code below works until line 47 is replaced with line 48 (i.e. calculating the fillStyle). For some reason attempting to use clientY to calculate the blue portion of the rgba doesn’t work, whereas calculating the alpha is not a problem.

<!DOCTYPE html>
<html>

<head>
    <title> My Animation </title>
</head>

<body>
    <canvas id="myCanvas" height="768" width="1200"></canvas>
</body>

    var mainCanvas = document.getElementById("myCanvas");
    var ctx = mainCanvas.getContext('2d');
    var canvasWidth = mainCanvas.width;
    var canvasHeight = mainCanvas.height;
    // the array of squares
    var squares = [];

    var mouseX = 1200;
    var mouseY = 768;
    var putPoint = function (e) {
        // update mouse
        mouseX = e.clientX;
        mouseY = e.clientY;
    }
    mainCanvas.addEventListener("click", putPoint);

    for (i = 0; i 


Source: stackoverflow-javascript