Question

由于我是JavaScript初学者，我想知道如何在HTML页面上播放和暂停JavaScript。在第一个JavaScript文件中，我有一个切换按钮，onClick显示/隐藏div元素标记，如下所示：

$(function () {        
    $(".toggleSidebar").click(function(event) {
    $(".sidebarToggle").hide();
    $(".toggleSidebar").removeClass("btn-info");
    $(this).addClass("btn-info");
    $("#"+$(this).attr("data-target")).fadeIn(500);
    localStorage.tab_sidebar =  $(this).attr("data-target")
    });
    if(localStorage.tab_sidebar != '')
    {
        $('.toggleSidebar[data-target="'+localStorage.tab_sidebar+'"]').click();
    }
});

    function toggleSidebar()
    {

    if ($("#my-section").hasClass('hide'))      
        $("#my-section").removeClass('hide');
    else
        $("#my-section").addClass('hide');

    }

div标签元素的背景动画为this JavaScript：

var colors = new Array(
  [62,35,255],
  [60,255,60],
  [255,35,98],
  [45,175,230],
  [255,0,255],
  [255,128,0]);

var step = 0;
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.0002;

function updateGradient()
{

  if ( $===undefined ) return;

var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgba("+r2+","+g2+","+b2+")";

 $('#my-section').css({
   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];

    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

  }
}

setInterval(updateGradient,10);

问题是，当行被隐藏时，这个JavaScript也会连续运行，浪费了PC资源。那么每当我按下切换按钮时，我怎么能让这个JavaScript继续播放（当显示行时）和暂停（当行被隐藏时）？

Answer 1

var colors = ...;
// All variable declarations for animated background

function updateGradient() {
    // Update gradient function (unchanged)
}


var refreshIntervalId;
// Or var refreshIntervalId = setInterval(updateGradient, 10);
// If you want the updateGradient function to run by default when the page is open.

function toggleSidebar() {
    if($("#my-section").hasClass('hide')) {
    // Show sidebar
        $("#my-section").removeClass('hide');

        // Loops updateGradient function
        refreshIntervalId = setInterval(updateGradient, 10);
    } else {
    // Hide sidebar
        $("#my-section").addClass('hide');

        // Stops updateGradient function
        clearInterval(refreshIntervalId);
    }
}

如何播放/暂停JavaScript onClick事件？

1 个答案: