我无法在Javascript中使用我的函数

Question

I'm getting error with my function change_slide(). ReferenceError: change_slide is not defined on line 24:1. My code is here:

$(document).ready(function() {

    function change_slide() {
        number = pclass.charAt(6);
        number = parseInt(number);

        if (number == 5) number = 1;
        else number++;

        $('.picks').removeClass(pclass);
        pclass = 'bgpick' + number;
        $('.picks').addClass(pclass);
    }

    var random = Math.floor((Math.random() * 5) + 1);
    var pclass = 'bgpick' + random;
    var number;
    $('.picks').addClass(pclass);
    setInterval('change_slide()', 3000);
    $('.next').on('click', function() {
        change_slide();
    });
});

change_slide() on click .next works, in setInterval doesn't work.

Answer 1

When you use a character string argument to setInterval , the Javascript code is executed in the global environment. You should pass a function reference instead of a character string, then it will be evaluated in the local environment.

setInterval(change_slide, 3000);

Note that you should not put parentheses after change_slide here. That will call the function immediately, instead of passing a reference to the function.

Answer 2

Take the function declaration out of document ready function ,

Also change

setInterval('change_slide()', 3000);

To

setInterval(change_slide, 3000);

Here is modified code

$(document).ready(function() {
  var random = Math.floor((Math.random() * 5) + 1);
  var pclass = 'bgpick' + random;
  var number;
  $('.picks').addClass(pclass);
  setInterval(change_slide, 3000);
  $('.next').on('click', function() {
    change_slide();
  });
});
function change_slide() {
  number = pclass.charAt(6);
  number = parseInt(number);

  if (number == 5) number = 1;
  else number++;

  $('.picks').removeClass(pclass);
  pclass = 'bgpick' + number;
  $('.picks').addClass(pclass);
}