javascript - 如何在调整大小时运行一次脚本？

Question

假设有 mob、tab 和 desk 的点。 mob is "<768" tab is "> = 768" and "<1024" desk is "> 1024"

原来当你到达标签时，你需要执行一次功能，如果窗口改变并成为暴民，你需要再次执行一次功能，等等。

我这样做了

$(function() {
  var isDevice = "mob"; /* mob tab desk */

  $(window).on("resize", function() {
    var windowWidth = $(window).width();
    if (windowWidth < 768) {
      if (isDevice != "mob") {
        isDevice = "mob";
        console.log(isDevice);
      }
    } else if (windowWidth >= 768 && windowWidth < 1024) {
      if (isDevice != "tab") {
        isDevice = "tab";
        console.log(isDevice);
      }
    } else if (windowWidth >= 1024) {
      if (isDevice != "desk") {
        isDevice = "desk";
        console.log(isDevice);
      }
    }
  });
});

这按预期工作，但也许有更好的方法来实现它？

链接到 codepen.io .

Answer 1

$(function() {
  var isDevice = "mob" /* mob tab desk */
  var doit;
  window.onresize = function(){
    clearTimeout(doit);
    doit = setTimeout(resizedw, 500);
  };   
});

function resizedw(){

 var windowWidth = $(window).width();
 //Implement logic here
    

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>