Question

以下代码的目的是提醒在线购物者在将商品放入购物篮之前必须选择颜色（通过选择/选项菜单）。如果他们没有选择颜色（即进行选择），则会显示一些闪烁的文本，提醒他们。

我试图让文字闪烁3次然后停止。我尝试使用一些反诉，但没有奏效。我怎样才能重写这个，所以眨眼只执行3次？

function blink() {
    if ($('.pleaseSelect').css('visibility') == 'hidden') {
        $('.pleaseSelect').css('visibility', 'visible');
    } else {
        $('.pleaseSelect').css('visibility', 'hidden')
    }
}

function showNotice() {  
    timerId = setInterval(blink, 200);
} 

$('#addToCart').click(function() {
    if ($("select > option:first").is(":selected")) {
        showNotice();
    } else  {
        clearInterval(showNotice);
        $('.pleaseSelect').css('visibility', 'hidden');
    }
})

Answer 1

function blink(){
    var blinkCount = 0;
    return function () {
        if($('.pleaseSelect').css('visibility')== 'hidden'){
            $('.pleaseSelect').css('visibility', 'visible');
        } else {
            $('.pleaseSelect').css('visibility', 'hidden')
        }
        blinkCount = blinkCount + 1;
        if (blinkCount === 3) {
            clearInterval(timerId);
        }
    }
}

唯一的问题是timeId是全局性的 - 不好的做法......但是你必须重构更多的代码才能纠正这个问题。

Answer 2

另一个选择是fadIn和fadeOut而不是你正在做的事情。

看起来像是：

if(element.val() == ''){
    element.fadeOut("fast");
    element.fadeIn("fast");
    element.fadeOut("fast");
    element.fadeIn("fast");
    element.fadeOut("fast");
    element.fadeIn("fast");
}

Answer 3

this example怎么样？使用匿名函数调用blink方法并继续递减计数器。

    id = setInterval(function () {
        counter--;
        if (!counter) {
            clearInterval(id);
        }
        blink();
    }, 200);

有关完整背景，请参阅the JSFiddle。

Answer 4

每次调用blink时，您都可以声明计数器并递增。然后检查您是否已拨打blink三次，清除间隔。您的showNotice功能也未正确定义。

var counter = 0,
    timerId;

function blink() {
    if ($('.pleaseSelect').css('visibility') == 'hidden') {
        $('.pleaseSelect').css('visibility', 'visible');
    } else {
        $('.pleaseSelect').css('visibility', 'hidden')
        if (counter > 4) {
            showNotice(false);
        }
    }
    counter++;
}

function showNotice(show) {
    if (show) {
        timerId = setInterval(blink, 200);
    } else {
        clearInterval(timerId);
        counter = 0;
    }
}

$('#addToCart').click(function () {
    if ($("select > option:first").is(":selected")) {
        showNotice(true);
    } else {
        showNotice(false);
        $('.pleaseSelect').css('visibility', 'hidden');
    }
})

Here is working fiddle

Answer 5

您可以使用私有范围内的变量来完成所需的行为：

$('#addToCart').click(function(e) {
  blink(e);
});

function blink(e) {
  var blink_count = 0;
  var timer = setInterval(function(e) {
    blink_count++;
    $('.pleaseSelect').toggle();
    if (blink_count >= 6) {
      clearInterval(timer);
      blink_count = 0;
    }
  }, 200);
}

如何在myFunc执行5次后清除（myFunc）？

5 个答案: