Question

我在jquery插件中清除间隔时遇到问题。以下是简化代码。如果我在Firefox控制台内部尝试运行

$('.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>

Answer 1

您的代码有几处错误。

您无法在$ wrapper上保存数据。因为它们每次都会重新创建。
你需要在创建一个新的之前停止旧的间隔，否则你将失去id以阻止它。

不污染包装，它们可能会导致问题。例如。如果以后，动画函数想要使用.stop（）来停止动画，他们会发现他们无法停止

;（function（$，f）{ $ .fn.pluginName = function（o）{ var $ wrapper = this;

/* 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 = $（＆＃39; .banner＆＃39;）。pluginName（）; $（＆＃39; .banner＆＃39）。pluginName（＆＃39;停止＆＃39）;

Answer 2

尝试在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);

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

2 个答案: