Question

我有一个javascript代码，可以向下滚动背景图片，但我在去抖时遇到了一些麻烦，所以我为不同的浏览器设置了不同的去抖时间（我知道欺骗浏览器是件坏事，但我是新的到javascript，它现在完成工作）。

但还有另外一件事，当我在手机上滚动时，它的滚动速度太快，所以我想为小于480px的屏幕设置另一个去抖时间。它不起作用。
我认为这是因为“浏览器if”会覆盖“width if”，但不确定如何修复它。

这是代码（我知道它编写得很糟糕，我还是javascript的新手）：

$(document).ready(function(){


    var isFirefox = typeof InstallTrigger !== 'undefined';  
    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    var isChrome = !!window.chrome && !isOpera;   

    var numberofscroll = 0;
    var lastScrollTop = 0;
    var dontHandle = false;
    $("#home").scroll(function () {
    if (dontHandle) return;
        dontHandle = true;
        var st = $(this).scrollTop();
        (st > lastScrollTop) ? numberofscroll++ : numberofscroll--;
        console.log(numberofscroll);
        console.log(lastScrollTop);
        console.log(st);
        if (numberofscroll<2){
            change_background2(numberofscroll);
        }
        else if (numberofscroll<3){
            change_background3(numberofscroll);
        }
        else if (numberofscroll<4){
            change_background4(numberofscroll);
        }
        else if (numberofscroll<5){
            change_background5(numberofscroll);
        }
        else if (numberofscroll<6){
            change_background6(numberofscroll);
        }

        lastScrollTop = st;
        if (isFirefox == true) {
        window.setTimeout(function() {
            dontHandle = false;
        }, 150);
        }else if (isOpera == true) {
        window.setTimeout(function() {
            dontHandle = false;
        }, 10);
        }else if (isChrome == true) {
             window.setTimeout(function() {
            dontHandle = false;
        }, 10);
        }else if ($(window).width() < 480){
         window.setTimeout(function() {
         dontHandle = false;
        }, 500);
        }else { 
            window.setTimeout(function() {
            dontHandle = false;
        }, 50);
        }
    });

/images swaping code here/

});

添加了这个，没有用：

    if ($(window).width() < 480){
     window.setTimeout(function() {
     dontHandle = false;
    }, 500);
    }else { 
    window.setTimeout(function() {
     dontHandle = false;
    }, 50);
    }

Answer 1

正在发生的事情基于 if-else if-else 结构。如果其中任何一个为真，则不评估项目的重置。因此，如果您使用Chrome并且宽度为300px：

if (isFirefox == true) {
  ...
}else if (isOpera == true) {
  ..
}else if (isChrome == true) {
  ...
}else if ($(window).width() < 480){
 ...
}else { 
  ...
}

它将停留在isChrome == true true并跳过其余部分，这意味着您从未进行过浏览器宽度检查。要修复它，只需先进行宽度检查。这样它总是先检查宽度，然后检查下一个浏览器。

if ($(window).width() < 480) {
  ...
}else if (isOpera == true) {
  ..
}else if (isChrome == true) {
  ...
}else if (isFirefox == true){
 ...
}else { 
  ...
}

仅为智能手机加载不同的JavaScript

1 个答案: