如何制作一个每次点击它都会做其他事情的开关按钮?

时间:2014-11-08 06:55:39

标签: javascript

我在按钮onclick事件中调用此函数:

function pauseSlide() {
                clearInterval(sint);
                setInterval(slideUpdate, 1000); paused(clearInterval)
            }

我希望在第一次点击时执行clearInterval(sint); 如果我再次单击该按钮,则只执行setInterval(slideUpdate,1000);

像开关一样。

例如在csharp中你这样做:CelsiusFahrenheit =!CelsiusFarenheit; 所以只需点击布尔CelsiusFahrenheit为真,然后点击它为假,然后再次为真等等......

这是javascript按钮onclick事件:

var
                    slideShow = d.getElementById('slideShow'),
                    slideCounter = make('div', false, {id: 'slideCounter'}),
                    slideControls = make('div', false, {id: 'slideControls'}),
                    slidePrev = make('a', 'Previous Slide', {
                        onclick: function (e) {
                            controlEvent(e, prevSlide);
                        },
                        className: 'previous',
                        href: '#'
                    }, slideControls),
                    slideNext = make('a', 'Next Slide', {
                        onclick: function (e) {
                            controlEvent(e, nextSlide);
                        },
                        className: 'next',
                        href: '#'
                    }, slideControls),
                    slidePause = make('a', 'Pause Slide', {
                        onclick: function (e) {
                            controlEvent(e, pauseSlide);
                        },
                        className: 'pause',
                        href: '#'
                    }, slideControls)

如果单击“暂停幻灯片”按钮,我会调用函数pauseSlide 在pauseSlide里面我想让开关一键调用clearInterval,另一次点击会调用setInterval。

我也有这个功能:

function slideUpdate() {
                if (swapCounter--)
                    showCounter();
                else
                    nextSlide();
            }

如果我点击按钮很多,它只是让倒计时每次移动得更快。

如果有帮助或需要,这是包含所有按钮事件的完整代码:

JS

3 个答案:

答案 0 :(得分:0)

可能有几种方法可以做到这一点。最好的可能是保留一个布尔变量,例如" isPaused"并根据需要来回翻转。将您的单击逻辑包含在依赖于该变量的条件中。

顺便说一句,您无法检测间隔是否正在运行或已被清除。即使你可以,也很难阅读并理解发生了什么。我更喜欢上面描述的语义变量。

答案 1 :(得分:0)

这是循环中句柄多重作用的示例,主要思想是将操作放到数组中并将它们移位/推送到循环中。

var actions = [

function () {
    console.log(1);
    $(this).next().fadeOut(100);
},

function () {
    console.log(2);
    $(this).next().fadeIn(100);
},

function () {
    console.log(3);
    $(this).next().slideUp();
},

function () {
    console.log(4);
    $(this).next().slideDown();
}];



$('.multiact').each(function (i, e) {
    $(e).data('actions', actions.concat());
}).click(function (e) {
    var acts = $(this).data('actions'),
        act = acts.shift();
    acts.push(act);
    act.call(this, e);
});

http://jsfiddle.net/8tgxpedq/2/

答案 2 :(得分:0)

var prevClicked = false;
           var my_slide_timer;
function pauseSlide() {
            if(!prevClicked){
                clearInterval(my_slide_timer);
                prevClicked = true;
             }else{
                  my_slide_timer = setInterval(slideUpdate, period); 
                  prevClicked = false;
             }
 }

这就是诀窍。