Функция не срабатывает правильно

Question

В настоящее время у меня есть JS ниже. Я пытаюсь запустить событие slideout.close(); с smoothstate onStart. Мой код ниже, и в настоящее время я получаю сообщение об ошибке в консоли. Может кто-то, пожалуйста, помогите мне.

Спасибо.

$(document).ready(function() { 
 
    slideout(); 
 
}); 
 

 
function slideout() { 
 
    var slideout = new Slideout({ 
 
     'panel': document.getElementById('slideout-content'), 
 
     'menu': document.getElementById('slideout-nav'), 
 
     'padding': 256, 
 
     'tolerance': 70, 
 
     'side': 'right' 
 
    }); 
 

 
    $('.mobile-nav__icon').on('click', function() { 
 
     slideout.toggle(); 
 
    }); 
 
} 
 

 
$(function(){ 
 
    'use strict'; 
 
    var options = { 
 
    prefetch: true, 
 
    cacheLength: 2, 
 
    onStart: { 
 
     duration: 860, 
 
     render: function ($container) { 
 
     $container.addClass('is-exiting'); 
 
     smoothState.restartCSSAnimations(); 
 
     slideout.close(); 
 
     } 
 
    }, 
 
    onReady: { 
 
     duration: 0, 
 
     render: function ($container, $newContent) { 
 
     $container.removeClass('is-exiting'); 
 
     $container.html($newContent); 
 
     } 
 
    }, 
 
    onAfter: function() { 
 
     slideout(); 
 
    } 
 
    }, 
 
    smoothState = $('#animate-wrapper').smoothState(options).data('smoothState'); 
 
});

Answer 1

Вы создали глобальную функцию под названием slideout, в которой у вас есть локальная переменная называется slideout, что это тот, который относится к Slideout объекта - вы не можете получить доступ, что местные переменная от других функций. Когда вы пытаетесь использовать slideout.close(), который ищет метод .close() на функции .

Одним из исправлений было бы изменить имя переменной или функции и сделать переменную глобальную, чтобы вы могли получить к ней доступ в любом месте. Но добавление большего количества глобалов беспорядочно.

Я думаю, что должно быть хорошо, чтобы объединить весь ваш код в один готовый обработчик документа, чтобы все было в одной области без каких-либо глобальных переменных (вам все равно нужно использовать другое имя для переменной).

я не могу проверить следующее, потому что я не то, что Slideout есть, но:

$(document).ready(function() { 
    'use strict'; 

    var slideout; // variable that is local to the doc ready handler function 
       // and accessible to all code within that handler 

    function initSlideout() { // function renamed 
    slideout = new Slideout({ // assign to variable declared above 
     'panel': document.getElementById('slideout-content'), 
     'menu': document.getElementById('slideout-nav'), 
     'padding': 256, 
     'tolerance': 70, 
     'side': 'right' 
    }); 
    } 
    initSlideout(); 

    $('.mobile-nav__icon').on('click', function() { 
    slideout.toggle(); 
    }); 

    var options = { 
    prefetch: true, 
    cacheLength: 2, 
    onStart: { 
     duration: 860, 
     render: function ($container) { 
     $container.addClass('is-exiting'); 
     smoothState.restartCSSAnimations(); 
     slideout.close(); 
     } 
    }, 
    onReady: { 
     duration: 0, 
     render: function ($container, $newContent) { 
     $container.removeClass('is-exiting'); 
     $container.html($newContent); 
     } 
    }, 
    onAfter: function() { 
     initSlideout(); 
    } 
    }, 
    smoothState = $('#animate-wrapper').smoothState(options).data('smoothState'); 
});