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

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