gpt4 book ai didi

javascript - 具有公共(public)方法的 jquery 插件的clearInterval

转载 作者:行者123 更新时间:2023-12-03 10:21:45 24 4
gpt4 key购买 nike

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

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

它将继续记录console.log(1)。我什至尝试使用 window.interval 而不是 $wrapper.interval 但仍然没有成功。我猜问题出在范围上,但为什么 window.interval 不是全局范围?使用公共(public)方法清除间隔的正确方法是什么?

<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>

最佳答案

您的代码有几个错误。

  1. 您无法在 $wrapper 上保存数据。因为它们每次都会被重新创建。
  2. 您需要在创建新间隔之前停止旧间隔,否则您将丢失停止它的 ID。
  3. 不要污染 wrapper ,它们会引起问题。例如。如果稍后,动画函数想要使用 .stop() 来停止动画,他们会发现他们无法停止

    ;(函数($, f) { $.fn.pluginName= 函数(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 = $('.banner').pluginName();$('.banner').pluginName('stop');

关于javascript - 具有公共(public)方法的 jquery 插件的clearInterval,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29593842/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com