未捕获的异常：无法在初始化之前调用滑块上的方法；试图调用方法“值”答案

【问题标题】：uncaught exception: cannot call methods on slider prior to initialization; attempted to call method 'value'未捕获的异常：无法在初始化之前调用滑块上的方法；试图调用方法“值”
【发布时间】：2012-11-13 14:18:39
【问题描述】：

我正在根据教程here编写自己的视频播放器

当我加载页面时，出现标题错误。

这是处理滑块的代码：

//create html structure
//main wrapper
var $video_wrap = $('<div></div>').addClass('logan-video-player').addClass(options.theme).addClass(options.childtheme);
//controls wraper
var $video_controls = $('<div class="logan-video-controls"><a class="logan-video-play" title="Play/Pause"></a><div class="logan-video-seek"></div><div class="logan-video-timer">00:00</div><div class="logan-volume-box"><div class="logan-volume-slider"></div><a class="logan-volume-button" title="Mute/Unmute"></a></div></div>');                     
$lVideo.wrap($video_wrap);
$lVideo.after($video_controls);

//get new elements
var $logan_video_seek = $('.logan-video-seek', $video_container);

var seeksliding;            
var createSeek = function() {
    if($lVideo.attr('readyState')) {
        var video_duration = $lVideo.attr('duration');
        $logan_video_seek.slider({
            value: 0,
            step: 0.01,
            orientation: "horizontal",
            range: "min",
            max: video_duration,
            animate: true,                  
            slide: function(){                          
                seeksliding = true;
            },
            stop:function(e,ui){
                seeksliding = false;                        
                $lVideo.attr("currentTime",ui.value);
            }
        });
        $video_controls.show();                 
    } else {
        setTimeout(createSeek, 150);
    }
};

createSeek();

var gTimeFormat=function(seconds){
    var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
    var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
    return m+":"+s;
};

var seekUpdate = function() {
    var currenttime = $lVideo.attr('currentTime');
    if(!seeksliding) $logan_video_seek.slider('value', currenttime);
    $logan_video_timer.text(gTimeFormat(currenttime));                          
};

$lVideo.bind('timeupdate', seekUpdate);

我不是 jquery 爱好者，这是我第一次从事插件工作，所以我不知道该怎么做。在谷歌上也找不到太多。

感谢您的宝贵时间

编辑
我浏览了滑块小部件的 JQuery UI API 规范，发现我可能错误地设置了滑块值：

$logan_video_seek.slider('value', currenttime) // see seekUpdate() function above

我已将其更改为如下：

$logan_video_seek.slider('option', 'value', currenttime);

不幸的是，我遇到了同样的错误：

未捕获的异常：无法在初始化之前调用方法：试图调用方法'option'

我在滑块 api 文档中找不到任何东西来初始化滑块。我确定会在上面的createSeek 函数中完成吗？

【问题讨论】：

$lVideo 是在哪里声明的？这段代码是从哪里执行的？
@AndrewD。它在代码中要早得多。我通过在最后一个之前删除(jQuery) 解决了这个问题；在插件中。不知道这是为了什么或为什么它会破坏代码，但现在控件出现了（视频也可以很好地播放）。但现在，我收到一条错误消息，提示 Object [object Object] has no method 'lVideo'
当您不断收到错误时，您可以将完整代码粘贴到 jsfiddle 之类的地方以保持完整性，但 codereview 会更适合它们。

标签： jquery html jquery-ui html5-video jquery-slider

【解决方案1】：

您在createSeek() 中的代码正在尝试初始化滑块而不阻止进一步执行（您无需等待成功并继续不管初始化是否发生），然后，当涉及到seekUpdate 时，它还没有准备好了，因为$lVideo.attr('readyState') 可能是假的。

尝试像这样在$video_controls.show(); 调用之后或之前将$lVideo.bind('timeupdate', seekUpdate); 移动到createSeek 中：

function createSeek() {
  if ($lVideo.attr('readyState')) {
    var video_duration = $lVideo.attr('duration');
    $logan_video_seek.slider({
    ...
    });
    $lVideo.bind('timeupdate', seekUpdate); // <-- notice line here
    $video_controls.show();
  } else {
    setTimeout(createSeek, 150);
  }
};

PS：你为什么不像往常一样简单地声明函数，如
function myEvilFn() { /* evil code */ }？
调试时，您将能够在堆栈框架中看到函数的名称，您也不应该关心它们的顺序。如果您想隐藏它们，请将它们放在另一个函数或 lambda 中）。但是使用赋值 (var fn=function(){...}) 只会让它们的顺序变得不必要地重要。

【讨论】：