使用公共方法的jquery插件的clearInterval

我遇到了jquery插件中清除間隔的問題。以下是簡化代碼。如果我嘗試在Firefox控制檯中運行使用公共方法的jquery插件的clearInterval

$('.banner').pluginName().stop()

它將繼續記錄console.log（1）。我甚至試圖用window.interval而不是$wrapper.interval，但仍然沒有成功。我想問題是與範圍，但爲什麼，不是window.interval全球範圍？用公共方法清除間隔會是一種合適的方式？

<html lang="en"> 
    <body> 
     <div class="banner"></div> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script>     
     ;(function($, f) { 
     $.fn.pluginName= function(o) { 
      var $wrapper = this; 
      var init = function(o) { 
       $wrapper.start(); 
       return $wrapper; 
      }; 

      this.start = function() { 
       $wrapper.interval = setInterval(function() { 
       console.log(1) 
       }, 1000); 
      }; 

      // Stop autoplay 
      this.stop = function() { 
      console.log(2) 
      clearInterval($wrapper.interval); 
       return $wrapper; 
      }; 
      return init(o); 

     }; 
     })(window.jQuery, false); 
     $('.banner').pluginName();   
     </script> 
    </body> 
</html>

來源

2015-04-12 JohnyFree

我也試過窗口而不是$包裝，它是一樣的。我不明白爲什麼它不能在外面訪問，或者更重要的是什麼是清除這個區間的正確方法。 – JohnyFree

你只需要在全局聲明$ wrapper.interval，就像在this.start之外，然後它應該可以在this.start的作用域之外訪問。 –

但是$ wrapper已經像全局一樣。我只能將它放在插件之外，但如果我需要在插件外定義變量，則創建插件是沒有意義的。沒有其他辦法嗎？ – JohnyFree

有你的代碼的幾個錯誤。

您無法將數據保存到$ wrapper。由於它們每次都被重新創建。
你需要停止舊的時間間隔，然後再進行新的操作，否則你將失去該ID來停止它。

不污染包裝，它們會導致問題。例如。運行後，如果一個動畫功能要使用.stop（）停止動畫，他們會發現，他們不能停止

;（函數（$，F）{$ = .fn.pluginName功能（ ○）{ 變量$包裝=此;

/* don't save data on wrapper object directly*/ 
function interval (data) { 
    if (data) { 
    $wrapper.data('interval', data); 
    } else { 
    return $wrapper.data('interval'); 
    } 

} 

var init = function(o) { 
    if (!o || o === 'start') { 
    start(); 
    } else { 
    stop(); 
    } 
    return $wrapper; 
}; 

/*don't pollute wrapper, use option to switch instead*/ 

function start() { 
    /* you must stop old interval first*/ 
    stop(); 

    console.log('started') 
    interval(setInterval(function() { 
    console.log(1) 
    }, 1000)); 
}; 

// Stop autoplay 
function stop() { 
    console.log('stoped') 
    clearInterval(interval()); 
    return $wrapper; 
}; 
return init(o);

}; }）（window.jQuery，FALSE）; var i = $（'。banner'）。pluginName（）; $（'。banner'）。pluginName（'stop'）;

來源

2015-04-13 04:56:36 Jerry

嘗試初始化this.interval以外的this.start使$ wrapper.interval不只是在this.start整個插件訪問和：

$.fn.pluginName= function(o) { 
     var $wrapper = this; 
     var init = function(o) { 
      $wrapper.start(); 
      return $wrapper; 
     }; 
     this.interval; 
     this.start = function() { 
      $wrapper.interval = setInterval(function() { 
      console.log(1) 
      }, 1000); 
     }; 

     // Stop autoplay 
     this.stop = function() { 
     console.log(2) 
     clearInterval($wrapper.interval); 
      return $wrapper; 
     }; 
     return init(o);

來源

2015-04-12 20:04:52

使用公共方法的jquery插件的clearInterval

回答

相關問題