停止setInterval，直到未执行操作

Stop setInterval until action not performed?

本文关键字：执行 操作 setInterval 停止      更新时间：2023-09-26

是否可以停止setInterval意味着只有在第一个事件完成时才会调用下一个间隔。

我只想在加载上一个图像时加载下一个图像。此事件应仅在鼠标悬停后才起作用。但如果下一个图像的大小很大，那么在我的情况下，下一个间隔就是调用。。我想停止间隔，直到最后一个图像没有加载。

这是我的代码：

jQuery('.product').on('mouseover', function(){
    timer = setInterval(function() {
        if (counter === product_images.length) {
            counter = 0;
        }
        // selector.addClass('hidden');
        loading_image.removeClass('hidden');
        selector.attr('src', 'localhost/product/' + product_images[counter]);
        var loadImage = new Image();
        loadImage.src = selector.attr('src');
        loadImage.onload = function() {console.log('after load');
        loading_image.addClass('hidden');
        // selector.removeClass('hidden');
        selector.show();
    };
    counter = counter + 1;
}, 1000);

我们如何停止setInterval或阻止它进入下一个间隔，即使上一个间隔的任务还没有完成。不适用于clearInterval，如果第一个任务完成，则应继续（setInterval）。

请帮帮我。

请尝试以下代码。这可能有效，

var flag = 1;
jQuery('.product').on('mouseover', function(){
    if(typeof timer != "undefined")
        clearInterval(timer);
    timer = setInterval(function() {
        if(flag){
            if (counter === product_images.length) {
                counter = 0;
            }
            loading_image.removeClass('hidden');
            selector.attr('src', 'localhost/product/' + product_images[counter]);
            flag = 0;
            var loadImage = new Image();
            loadImage.src = selector.attr('src');
            loadImage.onload = function() {
                console.log('after load');
                loading_image.addClass('hidden');
                selector.show();
                flag = 1;
            };
            counter = counter + 1;
        }
}, 1000);

注意：我尚未测试此代码。

相关文章：