Cancel stream when onClick, javascript

The idea behind what I want to do is to break and finish a function once I run the very same function again, but with different parameters.

Right now I have a stream of random characters being sent to an endpoint.

A class gets this endpoint and allows the stream to populate a content view.

I have a tab that calls this population function every time I click on it.

I would like it so that when I click another tab or the same tab, the function ends, stops using the previous parameters, and then runs the function again with the new parameters. In the case of clicking the same tab it would simply do nothing.

Below I have the HTML body, the CSS, the JS script for the client side, and the node.js server side that sends the stream. You should be able to more or less copy paste this and it will run.

Don't forget to npm install for the node. Just run the node code to start the server.

HTML:

<div class="tab-bar">
        <button class="tab" onclick="getStreamNContentLocale('stream_1')">London</button>
        <button class="tab" onclick="getStreamNContentLocale('stream_2')">Paris</button>
        <button class="tab" onclick="getStreamNContentLocale('stream_3')">Tokyo</button>
    </div>
    <div class="content">
        <div id="stream_1">
        </div>
        <div id="stream_2">
        </div>
        <div id="stream_3">
        </div>
    </div>
    <script src="js/index.js"></script>

CSS:

.tab-bar {
    height: 40px;
    width: 100%;
    background-color: black;
}

.tab {
    color: white;
    font-size: 100%;
    float: left;
    padding: 9px 16px;
    vertical-align: middle;
    background-color: inherit;
}

.content {
    border: 1px solid #ccc;
    overflow: auto;
    height: 200px;
    width: 100%;
}

JS:

console.log((new Date()).toLocaleString());

function getStreamNContentLocale(contentID) {
    let xhr = new XMLHttpRequest(),
        streamArray = [],
        snapshotsSent = 0;

    xhr.open('GET', `/stream`);
    xhr.seenBytes = 0;
    xhr.onreadystatechange = () => {
        if (xhr.readyState > 2) {
            if (snapshotsSent < 30) {
                streamArray.push("Snapshot sent " + (new Date()).toLocaleString() + "\n" + xhr.responseText.substring(xhr.seenBytes, xhr.responseText.length));
                document.querySelector(`#${contentID}`).innerText = streamArray;
            } else if (snapshotsSent >= 30) {
                streamArray.shift();
                streamArray.push("Snapshot sent " + (new Date()).toLocaleString() + "\n" + xhr.responseText.substring(xhr.seenBytes, xhr.responseText.length));
                document.querySelector(`#${contentID}`).innerText = streamArray;
            }
            xhr.seenBytes = xhr.responseText.length;
        }
        snapshotsSent++;
        /**********************************************************************************************
         * xhr.responseText.substring(xhr.seenBytes, xhr.responseText.length) is each snapshot we GET *
         * snapshotsSent is the number of snapshots we have actually gotten so far in this session    *
         **********************************************************************************************/
    };
    xhr.send();
}

server:

let express = require('express'),
    app = express(),
    bodyParser = require('body-parser'),
    path = require('path');

init(function() {
        callback(null);
    });

function init(callback) {
    app.use(bodyParser.json());

    app.use(bodyParser.urlencoded({
        extended: true
    }));

    app.use(express.static(path.join(__dirname, "../../views")));

    app.get('/', function(req, res) {
        res.sendFile(path.join(__dirname, "../../views/index.html"));
    });

    app.get('/stream', (req, res) => {
        console.log('sending stream to /stream');
        setInterval(() => {
            res.write(Math.random(16).toString(36).substring(2) + "\n");
        }, 200);
    });

    app.listen(8000, () => {
        console.log("Listening on port 8000");
    });

    callback();
}

via Ryan Tibbetts