Question

我在一些帮助下创建了一些javascript代码，以便在我按下我的网络应用程序中的某些按钮时完成多项操作。它与以下链接提供的解决方案完美配合：brk提供的One of Multiple Tasks Operated by Button Won't Execute，但是当我将代码导入CodePen文本编辑器时，它无法正常工作。有三个按钮，＆＃34;在线，离线和所有按钮被按下，应该

将蓝屏切换为黑色
隐藏文字，＆＃34;按下按钮＆＃34;
隐藏闪烁的 - ： - 符号

但是，当我按下＆＃34; 在线＆＃34;，＆＃34; 离线＆＃34;和＆＃34; 所有＆＃34;按钮，似乎没有任何反应，因为有一个短暂的延迟。为什么会出现这种延迟？此外，闪烁的 - ： - 符号不会终止闪烁因为它应该......你能告诉我为什么会这样吗？非常感谢您的帮助！请参阅此处的CodePen链接：https://codepen.io/IDCoder/pen/mXMqGV

这是我的javascript代码：

var twitchTvStreamers;
var loaded = false;

$(document).ready(function(){

//GET TWITCH TV STREAMERS' STATUS AND API CALL

twitchTvStreamers=["FreeCodeCamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

//OUT OF ALL THE TWITCH TV STREAMERS IN A TWITCH TV ARRAY FIND THOSE 8 STREAMERS LISTED

});

//filter online offline and all
var filterchannel = filterch => { 
  if(!loaded)
  {
    for(channel of twitchTvStreamers){
      getChannelInfo(channel, filterch);
    }
  }


  else
    {
      setTimeout(function(){ 
        $('.display-output-here div').each(function(idx, item) {
          if($(item).hasClass(filterch))
            {
              $(item).show();
            }
          else
            {
              $(item).hide();
            }
        });
      }, 100);
    }

    if(!loaded)
  {
    for(channel of twitchTvStreamers){
      getChannelInfo(channel, filterch);
    }
  }

    {
      setTimeout(function(){ 
        $('.text1 div').each(function(idx, item) {
          if($(item).hasClass(filterch))
            {
              $(item).hide();
            }

        });
      }, 100);
    }

};//end of var filterChannel

$('button').click(function(e) {
 filterchannel(e.target.id);

})

var getChannelInfo = (channel, filterch) => { 
    loaded = true;
    $.getJSON('https://wind-bow.glitch.me/twitch-api/streams/' + channel)
    .done(function(info) {
        console.log(channel);
        if (info.stream === null) {
          appendInfo(channel,'offline',filterch);
        }
        else {
          appendInfo(channel,'online', filterch);
        }

    });
}
var appendInfo = (channel,target, filterch) => {
    $.getJSON('https://wind-bow.glitch.me/twitch-api/channels/' + channel)
        .done( function(ch){
            channelID = ch.display_name;
            channelLogo = ch.logo;
            channelUrl = ch.url;
            streamContent = ch.content;
            $('.display-output-here').append('<div class="' + target + ' all">'+channel+' is '+target);
            if(twitchTvStreamers[twitchTvStreamers.length - 1] === channel) {
              filterchannel(filterch);
            }
        });    


//BUTTONS OPERATIONS (ALL BUTTONS TARGETED BY USING CLASS THEY COME UNDER)
$(".user-status").on('click', function() {
    $(".text1").hide(); 
    $(".text2").hide(function() {
      clearInterval(x);
    });
    $('.display-output-here').css("background", "black");
    $('.TV-screen').css("background", "black");

  });

  var element = $(".text2");
  var shown = true;
  var x = setInterval(toggle, 500);

  function toggle() {
    if (shown) {
      element.hide();
    } else {
      element.show();
    }
    shown = !shown;
  }

}

//make part of video-screen text blink 
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);

function toggle() {
    if(shown) {
        element.hide();
        shown = false;
    } else {
        element.show();
        shown = true;
    }
}

//share-links code:
$('.Linkedinbutton').click(function() {
  var shareurl = $(this).data('shareurl');
  window.open('https://www.linkedin.com/shareArticle?mini=true&url=https://codepen.io/IDCoder/full/mXMqGV/' + escape(shareurl) + '&title=' + document.title + '&source=SourceTitle&target=new');
  return false;
});

//Facebook  
 var facebookShare = document.querySelector('[data-js="Facebookbutton"]');

facebookShare.onclick = function(e) {
  e.preventDefault();
  var facebookWindow = window.open('https://www.facebook.com/sharer/sharer.php?u=' + document.URL, 'facebook-popup', 'height=350,width=600');
  if(facebookWindow.focus) { facebookWindow.focus(); }
    return false;
}

/*
//user status button operations


*/
//search bar operation
$("#searchStreamers").on("keypress",function(e){
   var typeStreamer = $('input').val();
     if(e.which===13){
       $('input').submit(function(e){
       e.preventDefault();
         });
        }
    });

Javascript多任务按钮的解决方案在CodePen中无法正常工作

0 个答案: