未捕获的TypeError:this.timestamp不是函数

德瓦尔加

我有点困惑,不知道出了什么问题。
也许对此有一些解释this,它在对象方法中的用法将很棒。
我看到我应该将其this用作全局变量,但这会给我带来更多错误。
这是我的代码:

$(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()

});

任何帮助将非常感激。
谢谢!

史蒂夫·奥康纳

调用时,window.requestAnimationFrame(this.progress)该函数将在以后this指向window对象时被调用尝试改变

window.requestAnimationFrame(this.progress);

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

未捕获的TypeError:$(…).on不是函数

来自分类Dev

未捕获的TypeError:$(...)。stellar不是函数

来自分类Dev

未捕获的TypeError:$ .cookie不是Dialog的函数

来自分类Dev

未捕获的TypeError:undefined不是函数-Javascript

来自分类Dev

未捕获的TypeError:$ .ajax(...)。成功不是函数

来自分类Dev

未捕获的TypeError:#<Object>不是函数

来自分类Dev

未捕获的TypeError:$ .growl不是函数

来自分类Dev

未捕获的TypeError:Undefined不是函数

来自分类常见问题

未捕获的TypeError:$ .post不是函数

来自分类Dev

未捕获的TypeError:$(...)。tokenfield不是函数

来自分类Dev

未捕获的TypeError:this.transitionTo不是函数

来自分类Dev

未捕获的TypeError:undefined不是函数

来自分类Dev

未捕获的TypeError:number不是函数

来自分类Dev

获取“未捕获的TypeError:$(...)。timeago不是函数”

来自分类Dev

未捕获的TypeError:undefined不是jQuery的函数

来自分类Dev

Javascript“未捕获的TypeError:对象不是函数”

来自分类Dev

未捕获的TypeError:undefined不是函数

来自分类Dev

jQuery-未捕获的TypeError:$不是函数

来自分类Dev

未捕获的typeerror $(...)。swipe不是函数

来自分类Dev

未捕获的TypeError:UnitType不是构造函数

来自分类Dev

未捕获的TypeError:响应不是函数

来自分类Dev

未捕获的TypeError:方法不是函数

来自分类Dev

JavaScript OOP:未捕获的TypeError:不是函数

来自分类Dev

未捕获的TypeError:lang不是函数

来自分类Dev

未捕获的TypeError:$(...)。live不是函数

来自分类Dev

未捕获的TypeError:对象(...)不是函数

来自分类Dev

未捕获的TypeError:$(...)。formSelect不是函数

来自分类Dev

未捕获的TypeError:.get $ price不是函数

来自分类Dev

未捕获的TypeError:翻译不是函数

Related 相关文章

  1. 1

    未捕获的TypeError:$(…).on不是函数

  2. 2

    未捕获的TypeError:$(...)。stellar不是函数

  3. 3

    未捕获的TypeError:$ .cookie不是Dialog的函数

  4. 4

    未捕获的TypeError:undefined不是函数-Javascript

  5. 5

    未捕获的TypeError:$ .ajax(...)。成功不是函数

  6. 6

    未捕获的TypeError:#<Object>不是函数

  7. 7

    未捕获的TypeError:$ .growl不是函数

  8. 8

    未捕获的TypeError:Undefined不是函数

  9. 9

    未捕获的TypeError:$ .post不是函数

  10. 10

    未捕获的TypeError:$(...)。tokenfield不是函数

  11. 11

    未捕获的TypeError:this.transitionTo不是函数

  12. 12

    未捕获的TypeError:undefined不是函数

  13. 13

    未捕获的TypeError:number不是函数

  14. 14

    获取“未捕获的TypeError:$(...)。timeago不是函数”

  15. 15

    未捕获的TypeError:undefined不是jQuery的函数

  16. 16

    Javascript“未捕获的TypeError:对象不是函数”

  17. 17

    未捕获的TypeError:undefined不是函数

  18. 18

    jQuery-未捕获的TypeError:$不是函数

  19. 19

    未捕获的typeerror $(...)。swipe不是函数

  20. 20

    未捕获的TypeError:UnitType不是构造函数

  21. 21

    未捕获的TypeError:响应不是函数

  22. 22

    未捕获的TypeError:方法不是函数

  23. 23

    JavaScript OOP:未捕获的TypeError:不是函数

  24. 24

    未捕获的TypeError:lang不是函数

  25. 25

    未捕获的TypeError:$(...)。live不是函数

  26. 26

    未捕获的TypeError:对象(...)不是函数

  27. 27

    未捕获的TypeError:$(...)。formSelect不是函数

  28. 28

    未捕获的TypeError:.get $ price不是函数

  29. 29

    未捕获的TypeError:翻译不是函数

热门标签

归档