Question

我们是否可以停止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，如果第一个任务完成则应该是continue（setInterval）。

请帮帮我。

Answer 1

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

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

注意：我没有测试过这段代码。

停止setInterval直到没有执行操作？

1 个答案: