Question

在每次迭代setInterval循环后，我的iframe.on（'load'，...）的内容再次重复自身，就像每次重新加载iframe一样，它会记住这次重新加载，并在下一次交互中再次响应它

日志是：'加载'在第一步...'加载''加载'...'加载''加载''加载'等等。

代码：

$(document).ready(function () {

setInterval((function () {
    let i = 0;
    let iframe = $(document).find('iframe');

    return function () {
        i++;
        i = i % pages.length;
        // console.log(i);

        iframe.fadeOut().promise().done(() => {
            iframe.prop('width', pages[i].width)
                .prop('height', pages[i].height)
                // .prop('-webkit-transform','scale(0.28, 0.48)')
                .prop('src', pages[i].src);
            iframe.on('load', () => {
                iframe.fadeIn();
                console.log('loaded')
            });
        });
    }
})(), frameWindow_time);
});

Answer 1

在绑定新的迭代之前，您需要在每次迭代中清除iframe的事件侦听器：

setInterval((function () {
    let i = 0;
    let iframe = $(document).find('iframe');
    iframe.unbind( "load" );

    return function () {
        i++;
        i = i % pages.length;
        // console.log(i);

        iframe.fadeOut().promise().done(() => {
            iframe.prop('width', pages[i].width)
                .prop('height', pages[i].height)
                // .prop('-webkit-transform','scale(0.28, 0.48)')
                .prop('src', pages[i].src);
            iframe.on('load', () => {
                iframe.fadeIn();
                console.log('loaded')
            });
        });
        // move();
    }
})(), frameWindow_time);

示例：

setInterval()

或者您可以将其移到iframe = $(document).find('iframe'); iframe.on('load', () => { iframe.fadeIn(); console.log('loaded'); }); i=0 setInterval(function () { i++; i = i % pages.length; // console.log(i); iframe.fadeOut().promise().done(() => { iframe.prop('width', pages[i].width) .prop('height', pages[i].height) // .prop('-webkit-transform','scale(0.28, 0.48)') .prop('src', pages[i].src); }); // move(); }, frameWindow_time);函数之外：

global

$（'iframe'）。setInterval中的load（）开始重复

1 个答案: