我怎样才能制作一个切换按钮，每次点击它都会做其他事情？答案

【问题标题】：How can i make a switch button that each click it will do something else?我怎样才能制作一个切换按钮，每次点击它都会做其他事情？
【发布时间】：2014-11-08 06:55:38
【问题描述】：

我从按钮 onclick 事件中调用此函数：

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

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

就像一个开关。

例如，在 csharp 中，您可以这样做：CelsiusFahrenheit = !CelsiusFarenheit; 因此，单击布尔值摄氏华氏度为真，然后单击它为假，然后再次单击为真，依此类推....

这是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();
            }

如果我经常点击按钮，它只会让倒计时每次移动得更快。

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

【问题讨论】：

第三次点击或第四次点击等怎么样？
詹姆斯确实是对的，这也是一个问题，即使在第 5 次或第 100 次点击之后，如何让暂停继续按钮也能像这样工作。

标签： javascript

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这是在循环中处理多动作的示例，主要思想是将动作放置到数组中并将它们移动/推送到循环。

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/

【讨论】：

【解决方案3】：

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

这成功了。

【讨论】：