Question

我很难搞清楚我的问题。似乎jquery off方法无效。

这是我想要做的。我使用名为Slideshowify的插件创建了一个带有ken burns效果的幻灯片显示和一个jquery进度条，以显示每个图像在屏幕上显示的时间。

问题是插件没有处理窗口调整大小。所以我想要实现的是注册窗口调整大小事件并在调整窗口大小时重置插件。

要启动并重新启动我的进度条，我要使用2个事件，一个在显示图像之前，一个在隐藏之后。一切正常，但问题是off方法似乎没有注销事件。

因此，如果您多次调整窗口大小，则会注册并触发许多事件，并且进度条将在未设置时重置。

以下是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="~/Scripts/jquery.transit.min.js"></script>
    <script src="~/Scripts/jquery.slideshowify.js"></script>
    <script type="text/javascript">
        function startSlideShow()
        {
            $("body").off(); //unregister the events
            $("div[id^='slideshowify']").remove(); //remove the div that the plugin created
            $("#slideshow img").slideshowify();
            $("body").on("beforeFadeIn", onBeforeFadeIn); //event fired before an image is shown
            $("body").on("beforeFadeOut", onBeforeFadeOut); //event fired before an image is hidden
        }
        function onBeforeFadeIn(e, img)
        {
            startProgress();
        }
        function onBeforeFadeOut(e, img)
        {
            startProgress();
        }
        function startProgress()
        {
            $("#progressbar .ui-progressbar-value").stop(true, true); //stop the progress animation
            $("#progressbar").progressbar({ value: 0.1 }); //create/reset the progress bar
            $("#progressbar .ui-progressbar-value").animate({ width: "100%" }, 9000); //start the progress animation
        }
        function onWindowResize()
        {
            startSlideShow();
            startProgress();
        }
        $(document).ready(function ()
        {
            startSlideShow();
            $(window).resize(onWindowResize); //event fired when the window is resized
        });
    </script>
</head>
<body>
    <div id="slideshow">
        <img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0001.jpg" />
        <img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0002.jpg" />
        <img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0003.jpg" />
        <img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0004.jpg" />
        <img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0006.jpg" />
        <img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0012.jpg" />
        <img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0014.jpg" />
        <img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0016.jpg" />
    </div>
    <div id="progressbar" style="height:20px; width:100%;"></div>
</body>
</html>

Answer 1

当你调整窗口大小时，jQuery会在那个窗口中多次调用.resize（）函数＆＃34;调整大小＆＃34;。

Fiddle that console logs the resize events

.off（）方法可能正常，但你期待

$(window).resize(onWindowResize);

完成窗口大小调整后，

只会触发一次。事实并非如此。您似乎需要使用超时来实现您想要的效果。

Using Timeout

$(window).bind('resize', function(e)
{
    window.resizeEvt;
    $(window).resize(function()
    {
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function()
        {
            //code to do after window is resized
        }, 250);
    });
});

JQuery幻灯片，进度条和事件未取消注册

1 个答案: