杀死/停止jQuery脚本

Question

我有一个滑块，我只希望它的工作时，浏览器是在640像素以下。

到目前为止，如果浏览器刷新时浏览器的宽度超过640px，我的网格显示正确，如果我然后使浏览器下640px然后查询踢并将网格再次转换为滑块这部分工作正常。

与我的代码的问题是，当您使浏览器再次超过640px然后查询仍在运行，我的网格仍然是一个滑块。

下面的代码：

var currentState = false; 

function setSize() { 

var state = $(window).width() < 640; 
if (state != currentState) { 
currentState = state; 
if (state) { 
    window.sliderInit = (function (window, document, undefined) { 

     'use strict'; 

     // Feature Test 
     if ('querySelector' in document && 'addEventListener' in window && Array.prototype.forEach) { 

      // SELECTORS 
      var sliders = document.querySelectorAll('[data-slider]'); 
      var mySwipe = Array; 


      // EVENTS, LISTENERS, AND INITS 

      // Add class to HTML element to activate conditional CSS 
      document.documentElement.className += ' js-slider'; 

      // Activate all sliders 
      Array.prototype.forEach.call(sliders, function (slider, index) { 

       // SELECTORS 

       var slideCount = slider.querySelector('[data-slider-count]'); // Slider count wrapper 
       var slideNav = slider.querySelector('[data-slider-nav]'); // Slider nav wrapper 


       // METHODS 

       // Display count of slides 
       var createSlideCount = function() { 
        // Variables 
        var slideTotal = mySwipe[index].getNumSlides(); 
        var slideCurrent = mySwipe[index].getPos(); 

        // Content 
        if (slideCount !== null) { 
         slideCount.innerHTML = slideCurrent + ' of ' + slideTotal; 
        } 
       }; 

       // Display Slider navigation 
       var createNavButtons = function() { 
        if (slideNav !== null) { 
         slideNav.innerHTML = '<a data-slider-nav-prev href="#">Previous</a> | <a data-slider-nav-next href="#">Next</a>'; 
        } 
       }; 

       // Stop YouTube and Vimeo videos from playing when leaving the slide 
       var stopVideo = function() { 
        var currentSlide = mySwipe[index].getPos() - 1; 
        var iframe = slider.querySelector('[data-index="' + currentSlide + '"] iframe'); 
        var video = slider.querySelector('[data-index="' + currentSlide + '"] video'); 
        if (iframe !== null) { 
         var iframeSrc = iframe.src; 
         iframe.src = iframeSrc; 
        } 
        if (video !== null) { 
         video.pause(); 
        } 
       }; 

       // Handle next button 
       var handleNextBtn = function (event) { 
        event.preventDefault(); 
        stopVideo(); 
        mySwipe[index].next(); 
       }; 

       // Handle previous button 
       var handlePrevBtn = function (event) { 
        event.preventDefault(); 
        stopVideo(); 
        mySwipe[index].prev(); 
       }; 

       // Handle keypress 
       var handleKeypress = function (event) { 
        if (event.keyCode == 37) { 
         mySwipe[index].prev(); 
        } 
        if (event.keyCode == 39) { 
         mySwipe[index].next(); 
        } 
       }; 


       // EVENTS, LISTENERS, AND INITS 

       // Activate Slider 
       mySwipe[index] = Swipe(slider, { 
        continuous: true, 
        callback: function(index, elem) { 
         createSlideCount(); // Update with new position on slide change 
        } 
       }); 

       // Create slide count and nav 
       createSlideCount(); 
       createNavButtons(); 
       var btnNext = slider.querySelector('[data-slider-nav-next]'); // Next slide button 
       var btnPrev = slider.querySelector('[data-slider-nav-prev]'); // Previous slide button 

       // Toggle Previous & Next Buttons 
       if (btnNext) { 
        btnNext.addEventListener('click', handleNextBtn, false); 
       } 
       if (btnPrev) { 
        btnPrev.addEventListener('click', handlePrevBtn, false); 
       } 

       // Toggle Left & Right Keypress 
       window.addEventListener('keydown', handleKeypress, false); 

      }); 

     } 

    })(window, document); 



} else { 
    $('.swipe-container').removeAttr('id'); 
    $('.swipe-container').unbind(); 

} 
} 
} 

setSize(); 
$(window).on('resize', setSize); 

Answer 1

，你必须总是听窗口resize事件

window.onresize = function(event) { 
    setSize(); 
}; 

或者如果希望在调整大小完成JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?