How to Stop Recursive Ajax Polling on Bootstrap Modal Close?

Question

I am calling an ajax polling function when a particular bootstrap modal gets open, it works well, but when I close the BS Modal forcefully the polling function should stop, but it keeps on firing in the background.

I don't know what I am doing wrong. Using Bootstrap 4.

Here is my js script,

var run = function() {

    $.ajax({
        url: ajaxurl,
        dataType: 'json',
        type: 'GET',
        data: data,
        success: function (data) {
            var list = data.list;

            $("#modal").on('hidden.bs.modal', function (e) {
                clearTimeout(recursive);
                console.log('stop');
            });

            if (list > 0) {
                recursive = setTimeout(run, 2000);  
                console.log('run');
            } else if (list == 0) {
                clearTimeout(recursive);
                console.log('stop');
            }

        }
    });
}

Update:

I tried it this way, but not working.

var recursive;

$("#modal").on('shown.bs.modal', function (e) {
    run();
});

$("#modal").on('hidden.bs.modal', function (e) {
    clearTimeout(recursive);
});

var run = function() {

    $.ajax({
        url: ajaxurl,
        dataType: 'json',
        type: 'GET',
        data: data,
        success: function (data) {
            var list = data.list;

            if (list > 0) {
                recursive = setTimeout(run, 2000);  
                console.log('run');
            } else if (list == 0) {
                clearTimeout(recursive);
                console.log('stop');
            }

        }
    });
}