jQuery插件默认配置中嵌入If/Else语句根据屏幕宽度动态设置duration值的问题求助

嘿，我仔细看了你的代码，确实是作用域和函数逻辑的问题导致duration无法正常工作，来拆解下问题和修复方案：

核心问题分析 #

1. 没有返回值：你的duration是个需要返回时长数值的函数，但里面只在resize事件里给fztime赋值，却从来没把这个值return出去——插件根本拿不到你计算好的时长！
2. 变量重复定义+作用域混乱：你在duration函数里又声明了var fztime;，这不仅覆盖了函数参数，而且这个变量只在resize回调的作用域里有效，外面根本拿不到。
3. 事件重复绑定：每次插件调用duration函数时，都会重新绑定一次resize事件，次数多了会造成事件堆积，既浪费性能还可能出奇怪的bug。

修复后的代码方案 #

我们把resize事件监听移到配置外面，确保只绑定一次，同时让duration能正确返回当前的时长值：

// 先定义一个变量存储当前时长，默认用移动端的500
let scrollDuration = 500;

// 只绑定一次resize事件，实时更新时长
$(window).resize(function() {
  scrollDuration = $(window).width() >= 641 ? 7000 : 500;
}).resize(); // 页面加载时立刻触发一次，初始化正确的时长

$.fn.defaults = { 
  items: { start: 0 }, 
  scroll: { 
    easing: "swing", 
    duration: function() {
      // 直接返回预先计算好的时长
      return scrollDuration;
    }, 
    pauseOnHover: !1, 
    event: "click", 
    queue: !1 
  } 
}

额外优化：用闭包避免全局变量 #

如果你不想污染全局作用域，可以用自执行函数把变量封装起来：

$.fn.defaults = (function() {
  // 变量只在这个闭包内有效，不会影响全局
  let scrollDuration = 500;

  $(window).resize(function() {
    scrollDuration = $(window).width() >= 641 ? 7000 : 500;
  }).resize();

  return {
    items: { start: 0 }, 
    scroll: { 
      easing: "swing", 
      duration: function() {
        return scrollDuration;
      }, 
      pauseOnHover: !1, 
      event: "click", 
      queue: !1 
    } 
  };
})();

这样改完后，不管页面加载还是窗口大小变化，插件都能拿到正确的scroll duration值啦～

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