停止 setInterval 直到未执行操作？

Question

我们是否可以停止 setInterval 意味着下一个间隔将仅在第一个事件完成时调用。

我只想在上一张图片时加载下一张图片 loaded.This 事件应该只在鼠标后工作 over.But 如果下一张图片尺寸很大，那么在我的情况下下一个间隔正在调用..我想要停止间隔，直到最后一张图片未加载。

这是我的代码：

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 或阻止它进入下一个间隔，即使最后一个间隔的任务不是 completed.Not clearInterval，如果第一个任务完成，它应该继续（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 直到未执行操作？

Stop setInterval until action not performed?

javascript

jquery

setinterval