当我添加点击事件时，我的javascript函数运行重复（？） [英] My javascript function runs in duplicate(?) when I add click event

问题描述

免责声明：我试图学习javascript。我不是一个聪明的人。

Disclaimer: I am trying to learn javascript. I am not a clever man.

所以，我做了一个Jquery图像滑块。我很自豪。有用。它加载图像，并且它们一个接一个地显示它们，一天一天，一天一天。生活是好的。

So, I made a Jquery image slider. And I was proud. It works. It loads images, and it displays them one-after-another, day-in, day-out. Life was good.

然后我想添加导航到滑块，黑暗落在我的小王国。

Then I wanted to add navigation to the slider, and darkness fell upon my little kingdom.

当我点击其中一个按钮，我调用我的LoadSlide函数传递适当的索引 LoadSlide（NewIndex）。然后它运行该函数，但它也继续运行标准 LoadSlide（index + 1）参数的函数。因此，没有点击任何按钮，其运行方式如下：

When I click on one of the buttons, I call my LoadSlide function passing on the appropriate index LoadSlide(NewIndex). And then it runs the function, but it also continues running the function with the standard LoadSlide(index+1) argument. So without clicking any buttons it runs like so:

slide1 -> (6500ms) -> slide2 -> (6500ms) -> slide3 -> (6500ms) -> slide1 ...

然后我点击一个按钮（幻灯片2） ：

And then I click a button (slide 2), and another loop starts in parallel:

slide1 -> (6500ms) -> slide2 -> (6500ms) -> slide3 -> (6500ms) -> slide1 ...
   [click] slide2 -> (6500ms) -> slide3 -> (6500ms) -> slide1 -> (6500ms)...

请告诉我，你要享受许多少女和无尽的啤酒，如果这条龙被杀。

Please advise me, keepers of the lore. Thou shall enjoy many maidens and endless measures of ale, if this dragon is slain.

可用的代码在这里： http：// jsfiddle。 net / V6svT / 2 /

推荐答案

您遇到的问题是动画时间和点击之间的同步triger。
此外，当用户单击按钮时，您不会取消下一个计划的操作。
supose我们在幻灯片2意味着已经有一个定时器被推迟显示幻灯片3，当我点击按钮1，第一个定时器将保持runig显示幻灯片3，另一个定时器将创建显示幻灯片1

The issue you are having is the synchronisation between the animation time and the click triger. Also you are not cancelling the next scheduled action when a user click on the button. supose we are on slide 2 meaning there is already a timer that is supossed to show slide 3, when i click on button 1 the first timer will keep runig to show slide 3 and another timer will be created to show slide 1. I solve this by holding the timer and clearing it.

另一个问题是，在你的adnimation：fadeIn回调你添加的点击lisiner按钮，我认为会添加许多listiners所以当你点击两次，你将有相同的listner附加两次，因此在触发时调用两次。
这是我的纠正工作在我身边。可能有其他问题。
承担单击和转换之间的时间。例如，如果你将fadeIn时间设置为与setTimeout相同的时间，你将有同样的问题。

Another issue is that in your adnimation: fadeIn callback you are adding the click lisiner for button which I think will add many listiners so when you click twice you will have the same listner attached twice therefore called twice when trigered. Here is my correction works on my side . might have other issues . Bear in ming the timing between click and transition. for instance if you set fadeIn time to the same time of setTimeout you will have the same issue.

$(function () {
//edit
var timer='undefined';

var slides = new Array();
    slides[0] = 'http://i.imgur.com/UwRVo.png';
    slides[1] = 'http://i.imgur.com/wv08B.png';
    slides[2] = 'http://i.imgur.com/MlUbx.png'; 

   var max = $(slides).length;

var isBottom = false;

makeSlideBtns(max);

if(max>0) 
{
    LoadSlide(0,max);

}

function LoadSlide(index,max) {
     clearTimeout(timer);
     if(index<max)
        {
            var el0 = $("#slidebottom");
            var el1 = $("#slideover");
            var sbtn = $("#slidebtns li")[index];
            var img = new Image();
             $(sbtn).css('background-color', '#000'); 

            $(img).load(function () {
                $(this).css('display','none');
                if(isBottom == true)
                { 
                    $(el1).html(this);
                    $(el1).css('z-index', '3');
                    $(el0).css('z-index', '2');
                    console.log("el1 " + index);

                } else {
                    $(el0).html(this);
                    $(el1).css('z-index', '2');
                    $(el0).css('z-index', '3');
                    console.log("el0 " + index);

                }
                isBottom = !isBottom;

                function nextSlide () {                                                                      
                                LoadSlide(index+1,max);
                                console.log("sbtn: " + sbtn);
                                $(sbtn).css('background-color', '#fff');
                };

                $(this).fadeIn(2000,function() {
                        timer=setTimeout(nextSlide, 5000);     
                });


            }).error(function () {             
                LoadSlide(index+1,max);
            }).attr('src', slides[index]);  

        } else {
            LoadSlide(0,max)
        }
}

function makeSlideBtns (max) {

    for(i=0; i<max; i++) {
        var num = i + 1;
        $("#slidebtns").append('<li><a>' + num + '</a></li>');
    }
};

//add this in your loop will add more as you click
$("#slidebtns li").click(function () { 
     $("#slidebtns li").css('background-color', '#fff');                                               
     var i=$(this).index();             
      LoadSlide(i,max);
      return false;
  });

}）;

这篇关于当我添加点击事件时，我的javascript函数运行重复（？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！