从一个函数获取本地作用域，然后在另一个函数上调用setTimeout

Question

I want to to destroy the variable slider of the function imageGallery if a click is triggered with the class "variation_swatch".

Read some content about local and global scope but it seems that I can not get it done as I get that and slider are not defined.

How can I set it correctly?

function imageGallery() {
    var slider = $('#imageGallery').lightSlider({
        gallery:true,
        item:1,
        loop:false,
    });
    var that = this;
}

$(document).on('click','.variation_swatch',function(){
    setTimeout(function(){
        that.slider.destroy();
        console.log('gallery destroyed');
    }, 500);
    setTimeout(function(){
        if (!slider.lightSlider) {
            slider = $('#imageGallery').lightSlider({
                gallery:true,
                item:1,
                loop:false,
            });  
        };
        console.log('gallery rebuilt');
    }, 500);
})

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

Answer 1

Add the click handler within imageGallery , where you have access to slider :

function imageGallery() {
  var slider = $('#imageGallery').lightSlider({
        gallery:true,
        item:1,
        loop:false,
      });

  $(document).on('click','.variation_swatch',function(){
      setTimeout(function(){
          slider.destroy();
          console.log('gallery destroyed');
      }, 500);
      setTimeout(function(){
          if (!slider.lightSlider) {
              slider = $('#imageGallery').lightSlider({
                  gallery:true,
                  item:1,
                  loop:false,
              });  
          };
          console.log('gallery rebuilt');
      }, 500);
   });
}

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