Uncaught TypeError: this.timestamp is not a function

Question

I'm a bit confused, don't know what is going wrong.
Maybe a bit of an explanation about this and it's usage in object methods would be awesome.
I saw that i should use this as global variable but that gives me more errors.
Here is my code:

$(function () {

var options = {
    seeking: false,
    stopped: true,
    sliderOptions: {
        imagesLoaded: true,
        contain: true,
        wrapAround: true,
        cellAlign: 'left',
        setGallerySize: false,
        accessibility: true,
        prevNextButtons: false,
        pageDots: false,
        selectedAttraction: 0.02,
        hash: true
    }
}

var CH = {
    init: function () {
        this.playerEvents()
        this.bind()
        this.progress()
    },
    playerEvents: function () {
        slider.on('select.flickity', function (event, index) {
            $('#audio').attr('src', 'assets/mp3/' + $('.slide').eq(index).attr('id') + '.mp3')
            $('#id div, #title div').hide()
            $('#id div').eq(index).show()
            $('#title div').eq(index).show()
            $('#playpause').text('PLAY')
        }).on('change.flickity', function (event, index) {
            options.stopped == false ? (audio.play(), $('#playpause').text('PAUSE')) : (audio.pause(), $('#playpause').text('PLAY'))
        }).on('staticClick.flickity', function (event, pointer, cellElement, cellIndex) {
            if (typeof cellIndex == 'number') {
                slider.flickity('selectCell', cellIndex);
            }
        })

        $(window).on('load resize', function () {
            if (matchMedia('screen and (max-width: 600px)').matches) {
                slider.flickity({
                    cellAlign: 'center'
                })
            } else {
                slider.flickity({
                    cellAlign: 'left'
                })
            }

            slider.flickity('resize')
        })
    },
    addZero: function (i) {
        return i < 10 ? '0' + i : i;
    },
    timestamp: function (t) {
        t = Math.floor(t)
        var s = t % 60
        var m = Math.floor(t / 60)
        return this.addZero(m) + ':' + this.addZero(s)
    },
    progress: function () {
        console.log(this.timestamp(audio.currentTime))
        var dur = (audio.currentTime / audio.duration) * 100
        $('#a').css('width', dur + '%')
        $('#time').html(this.timestamp(audio.currentTime))
        audio.paused ? options.stopped = true : options.stopped = false
        window.requestAnimationFrame(this.progress)
    },
    seek: function (e) {
        if (e.type === 'click') {
            options.seeking = true;
            $('#playpause').text('PAUSE')
            audio.play()
        }
        if (options.seeking && (e.buttons > 0 || e.type == 'click') && !audio.paused) {
            var percent = e.offsetX / $(this).width()
            audio.currentTime = percent * audio.duration
            audio.volume = 0
        } else {
            audio.volume = 1
        }
    },
    playPause: function () {
        audio.paused ? (audio.play(), $('#playpause').text('PAUSE')) : (audio.pause(), $('#playpause').text('PLAY'));
    },
    menu: function () {
        if ($('#menu').hasClass('open')) {
            $('#menu').removeClass('open');
            $('#menu').css({
                right: '-100%',
                opacity: '0'
            });
            audio.animate({ volume: 1 })
            $('#menu-btn').removeClass('active')
        } else {
            $('#menu').addClass('open');
            $('#menu').css({
                right: '0',
                opacity: '1'
            });
            audio.animate({ volume: 0.5 })
            $('#menu-btn').addClass('active')
        }
    },
    bind: function () {
        $('#progress').on('click', this.seek)
        $('#progress').on('mousemove', this.seek)
        $('#progress').on('mouseleave', function () {
            options.seeking = false
        })
        $('#playpause').on('click', this.playPause)
        audio.onended = () => {
            slider.flickity('next')
            $('#playpause').text('PAUSE')
            audio.play()
        }
        $('#menu-btn, #close').on('click', this.menu)
        $('#nav a').on('click', function () {
            $(this).addClass('active').siblings('.active').removeClass('active');
            $('#content div').eq($(this).index()).fadeIn(250).siblings(this).hide();
        })
    }
}

var audio = $('#audio')[0]
var slider = $('#hae').flickity(options.sliderOptions)
CH.init()

});

Any help would be much appreciated.
Thanks!

Answer 1

When you call window.requestAnimationFrame(this.progress) the function will be called later with this pointing to the window object. Try changing

window.requestAnimationFrame(this.progress);

to

let self = this;
window.requestAnimationFrame(function(){
   self.progress()
   });