我有点困惑,不知道出了什么问题。
也许对此有一些解释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] 删除。
我来说两句