WordPress中Swiper调用autoplay.stop()报Uncaught TypeError问题求助

我碰到过好几次类似的情况，核心问题基本都是变量作用域导致的，结合WordPress的JS运行环境，给你分析下原因和解决方案：

为什么会出现Cannot read property 'stop' of undefined？ #

在WordPress环境中，绝大多数主题或自定义JS代码都会用**匿名自执行函数（IIFE）**包裹，目的是避免污染全局作用域。如果你的Swiper实例变量（newsSwiper）是定义在IIFE内部的局部变量，那么外部的jQuery(".s2").hover()回调就访问不到这个变量，自然会报“undefined”错误。

另外还要注意：WordPress默认加载的jQuery处于noConflict模式，$别名是被禁用的，不过你代码里用jQuery()调用没问题，这个不是你当前报错的原因，但写代码时尽量保持风格统一。

两种可行的解决方案 #

方案1：将Swiper实例挂载到全局window对象 #

把实例变量绑定到全局的window对象上，这样任何作用域都能访问到：

// 将实例挂载到window全局对象
window.newsSwiper = new Swiper('.s2', {
  direction: 'horizontal',
  loop: true,
  slidesPerView: 3,
  spaceBetween: 20,
  autoplay: {
    delay: 5000,
  },
});

window.filmSwiper = new Swiper('.s1', {
  direction: 'horizontal',
  loop: true,
  slidesPerView: 'auto',
  spaceBetween: 20,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

// 鼠标悬停停止，离开恢复自动播放
jQuery(".s2").hover(
  function() {
    window.newsSwiper.autoplay.stop();
  },
  function() {
    window.newsSwiper.autoplay.start();
  }
);

方案2：将所有代码放在同一个作用域内 #

推荐这种方式，既不会污染全局作用域，又能保证变量可访问：

// 用IIFE包裹，同时传入jQuery作为$别名，简化代码
(function($) {
  // 初始化Swiper实例
  var newsSwiper = new Swiper('.s2', {
    direction: 'horizontal',
    loop: true,
    slidesPerView: 3,
    spaceBetween: 20,
    autoplay: {
      delay: 5000,
    },
  });

  var filmSwiper = new Swiper('.s1', {
    direction: 'horizontal',
    loop: true,
    slidesPerView: 'auto',
    spaceBetween: 20,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });

  // 绑定hover事件，此时能直接访问newsSwiper变量
  $(".s2").hover(
    function() {
      newsSwiper.autoplay.stop();
    },
    function() {
      newsSwiper.autoplay.start();
    }
  );
})(jQuery);

额外提示 #

别忘了给hover事件加上离开时的恢复逻辑，不然轮播停了就不会自动动了。另外可以检查下Swiper版本，虽然你说查过issue写法正确，但如果是非常老的版本，autoplay的控制方法可能有差异，不过当前主流的Swiper 6+版本用autoplay.stop()是完全没问题的。

内容的提问来源于stack exchange，提问作者tobiasg