Question

我很难找到解决方案，需要一些帮助：这是一个简单的例子：

function ifTrueInitiateOnce() {
  console.log("True function should be initiated/triggered Once");
}

function ifFalseInitiateOnce() {
  console.log("False function should be initiated/triggered Once");
}

$(window).resize(function () {  
  if ($(window).width() > 767) {
    ifTrueInitiateOnce()
  } else {
  ifFalseInitiateOnce()
});

以下是详细的代码，我正在尝试修复：

var enteredMobileView = false;
var enteredDesktopView = false;

var delay = (function () {
  var timer = 0;
  return function (callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

function getWinSize() {
  if ($(window).width() > 767) {
    enteredDesktopView = true;
    enteredMobileView = false;
  } else {
    enteredDesktopView = false;
    enteredMobileView = true;
  }
}

getWinSize();

$(window).resize(function () {
  delay(function () {

    getWinSize();

  }, 500);
});

if (enteredDesktopView) {
  enteredDesktopView = false;
  ifDesktopInitiateOnce();
}

if (enteredMobileView) {
  enteredMobileView = false;
  ifMobileInitiateOnce()
}

function ifDesktopInitiateOnce() {
  console.log("DESKTOP True function should be initiated/triggered Once");
}

function ifMobileInitiateOnce() {
  console.log("MOBILE True function should be initiated/triggered Once");
}

我没有把它变得非常正确，或者可能更复杂。我试图从这段代码中得到的是。一旦屏幕进入移动视图或桌面视图，在调整窗口时，如果达到移动大小，则只触发该功能一次又一次窗口从桌面调整到移动，然后仅触发该功能一次，并在调整桌面大小时执行相同操作

Answer 1

应该在调整大小函数中调用应该触发一次的功能。我在评论getWinSize()中添加了因为你说你只想在有人真正调整大小时调用函数。如果应该在页面加载时调用它，则取消注释它。

function desktopFunction() {
  console.log("True function should be initiated/triggered Once");
}

function mobileFunction() {
  console.log("False function should be initiated/triggered Once");
}

var enteredMobileView = enteredDesktopView = false,
    delay = (function () {
      var timer = 0;

      return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
      };
    })();

function getWinSize() {

  if ($(window).width() > 767) {

    if(! enteredDesktopView){
        desktopFunction();
        enteredDesktopView = true;
        enteredMobileView = false;
    }

  } else {

    if(! enteredMobileView){
        mobileFunction();
        enteredMobileView = true;
        enteredDesktopView = false;
    }

  }

}

// getWinSize();

$(window).resize(function () {
  delay(function () {
    getWinSize();
  }, 500);
});

Answer 2

$(window).resize(function () {
  if ($(window).width() > 767) {
    if (typeof(desktop) == "undefined") {
      desktop = true;
      mobile = undefined;
      console.log("DESKTOP True function should be initiated/triggered Once")
    }
  } else {
    if (typeof(mobile) == "undefined") {
      mobile = true;
      desktop = undefined;
      console.log("MOBILE True function should be initiated/triggered Once")
    }
  }
});

Answer 3

var win = (function() {
    var resize;
    var view;
    var enteredDesktopView;
    var enteredMobileView;

    function createInstance() {
        var object = new Object("winresize");
        return object;
    }

    function getWinSize() {
        if ($(window).width() > 767) {
            enteredDesktopView = true;
            enteredMobileView = false;
        } else {
            enteredDesktopView = false;
            enteredMobileView = true;
        }
        view = {
            "desktopView": enteredDesktopView,
            "mobileView": enteredMobileView
        };
    }



    return {
        checkResize: function() {
            if (!resize) {
                resize = createInstance();
                getWinSize();
            }
            return resize;
        }

    };
})();

function run() {
    win.checkResize();
    console.log(win.view);
}

run();

在调整大小触发函数一次，直到条件为True或False

3 个答案: