関数をコールバックで呼び出してからjavascriptで定義しますか？

Question

私はこれを頭の中で包み込むのにいくつか問題があります。私はほぼ完全にjavascriptで構築されたWebアプリケーションを持っています。基本的なテンプレートから始め、ユーザーが対話するにつれてコンテンツを追加し始めます。 Greensockをアニメーションライブラリとして使用しようとしています。アニメーションライブラリの進捗スライダを使用して、アニメーションの距離を表示する方法については、こちらを参照してください。https://greensock.com/timelinemax

問題は、コールバックonUpdate各フレームでその機能を実行するはずです。次に、それを使ってアニメーションでスライダトラックを作成します。

var mainTL = new TimelineLite({onUpdate:updateSlider}); 
function updateSlider() { 
    sliderTimeline.noUiSlider.set(mainTL.progress()); 
} 

スライダオブジェクトがまだ存在しないことを除いて、これは機能します。なぜ、これはファイルに含まれる最後のコードのいくつかですが、コンソールログにページの `ReferenceError：sliderTimelineが定義されていません 'というエラーが表示されますが、すべて正常に動作します。

は、これらのエラーから離れるしようとするために、私はこのようにそれを実行しようとしました： updateSlider' function hasn't been defined, and it fails to start at all. I could put them both in a $（ドキュメント）.ready（関数は、（） `が、その後、彼らはなるので

var mainTL = new TimelineLite({onUpdate:updateSlider}); 
$(document).ready(function() { 
    function updateSlider() { 
     sliderTimeline.noUiSlider.set(mainTL.progress()); 
    } 
}); 

を除いては、今では失敗しますローカル関数/変数と私はそれらへのアクセスを持っていないと働いています5つの他のJavaScriptファイル。

私はエラーで生きている場合、または私は？

Answer 1

のことを考えていないです何かがありますかあなたはそのコードページを見るhttp://codepen.io/GreenSock/pen/FnsqC/彼らは持っています：

var tl = new TimelineMax({delay:0.5, repeat:3, 
          repeatDelay:2, onUpdate:updateStats, 
          onRepeat:updateReps, onComplete:restart}); 
function updateReps() { 
    reps++; 
    repeatCount.innerHTML = reps; 
} 

function updateStats() { 
    time.innerHTML = tl.time().toFixed(2); 
    totalTime.innerHTML = tl.totalTime().toFixed(2); 
    progress.innerHTML = tl.progress().toFixed(2); 
    totalProgress.innerHTML = tl.totalProgress().toFixed(2); 
} 

あなたはonUpdateのコールバック関数を定義する必要があることを意味します。

Answer 2

sliderTimelineが存在するかどうかは、呼び出す前に確認できます。

function updateSlider() { 
    if (typeof sliderTimeline !== 'undefined') { 
    sliderTimeline.noUiSlider.set(mainTL.progress()); 
    } 
} 

それとも、sliderTimelineが宣言、まだ割り当てられていないことがわかっている場合：

function updateSlider() { 
    if (sliderTimeline) { 
    sliderTimeline.noUiSlider.set(mainTL.progress()); 
    } 
} 

注onUpdateが頻繁に呼び出されるので、この作品、それが最終的に呼び出されることに例の変更function updateSlider()用最終的にsliderTimelineが定義されます。

編集：
また、あなたは限り、あなたは、関数の外で宣言するよう$(document).ready()内のグローバル変数を割り当てることができます。例えば

：

var mainTL; 
var updateSlider; 
$(document).ready(function() { 
    updateSlider = function() { 
     sliderTimeline.noUiSlider.set(mainTL.progress()); 
    }; 
    mainTL = new TimelineLite({onUpdate: updateSlider}); 
});