•  19-09-2019
  •  | 
  •  

문제

내가 이것을 가지고 있다면 

window.onresize = function() {
  alert('resized!!');
};

내 기능이 여러 번 발사됩니다 전역 크기 조정이지만 캡처하고 싶습니다 완성 크기 조정. 이것은 IE에 있습니다.

어떤 아이디어? 여기에는 다양한 아이디어가 있지만 지금까지 저에게 효과가 없었습니다 (예 : IE의 Window.onresizeend 이벤트.)

도움이 되었습니까?

해결책

이 경우, 나는 할 것이다 강하게 디 ouncing을 제안하십시오. 내가 찾은 JavaScript 에서이 작업을 수행하는 가장 간단하고 효과적이며 신뢰할 수있는 방법은 Ben Alman의 jQuery 플러그인, 스로틀/분광 (jQuery의 유무에 관계없이 사용될 수 있습니다 - 나는 알고 있습니다 ... 이상한 소리).

Decouncing을 사용하면이를 수행하는 코드는 다음과 같이 간단합니다.

$(window).resize($.debounce(1000, function() {
   // Handle your resize only once total, after a one second calm.
   ...
}));

누군가를 도울 수 있기를 바랍니다. ;)

다른 팁

나는 크기를 조정 한 후 무언가를하고 싶을 때 항상 이것을 사용합니다. 전화 setTimeout 그리고 clearTimeout 크기 조정 속도에 눈에 띄는 영향을 미치지 않으므로 여러 번이라고 불리는 것은 문제가되지 않습니다.

var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
   if(timeOut != null) clearTimeout(timeOut);
   timeOut = setTimeout(func, 100);
}

이것은 완벽하지 않습니다 그러나 그것은 당신에게 필요한 시작을 줄 것입니다.

var initialX = null;
var initialY = null;
var lastResize = null;
var waiting = false;
var first = true;
var id = 0;

function updateResizeTime()
{
    if (initialX === event.clientX && initialY === event.clientY)
    {
        return;
    }

    initialX = event.clientX;
    initialY = event.clientY;

    if (first)
    {
        first = false;
        return;
    }

    lastResize = new Date();            
    if (!waiting && id == 0)
    {
        waiting = true;
        id = setInterval(checkForResizeEnd, 1000);
    }
}

function checkForResizeEnd()
{
    if ((new Date()).getTime() - lastResize.getTime() >= 1000)
    {
        waiting = false;
        clearInterval(id);
        id = 0;
        alert('hey!');
    }
}

window.onresize = function()
{
    updateResizeTime();
}

실제로 여러 이벤트가 있기 때문에 여러 이벤트가 있습니다. Windows는 창을 드래그 할 때 여러 번 크기를 조정하여 크기를 조정합니다 (기본적으로 레지스트리에서 변경할 수 있습니다).

당신이 할 수있는 일은 지연을 추가하는 것입니다. IE 이벤트가 시작될 때마다 클리어 타임 아웃 (Myresize, 1000)을 수행하십시오. 그러면 마지막으로 만 실제 크기를 조정합니다.

이것이 도움이 될지 확실하지 않지만 완벽하게 작동하는 것처럼 보이므로 여기에 있습니다. 이전 게시물에서 스 니펫을 가져 와서 약간 수정했습니다. DocEnter () 함수는 먼저 PX를 EM으로 변환하고 물체의 너비를 잠그고 나머지를 2로 나눕니다. 결과는 왼쪽 마진으로 할당됩니다. DocEnter ()는 객체를 중심으로 실행됩니다. Window가 ROSEDIZING으로 DocEnter ()를 다시 실행하면 타임 아웃이 발생합니다.

function doCenter() {
document.getElementById("menuWrapper").style.position = "fixed";
var getEM = (window.innerWidth * 0.063);
document.getElementById("menuWrapper").style.left = (getEM - 40) / 2 + "em";
}

doCenter();

var timeOut = null;
var func = function() {doCenter()};
window.onresize = function(){
    if (timeOut != null) clearTimeout(timeOut);
    timeOut = setTimeout(func, 100);
};

간단한 순수 JavaScript 솔루션, 더 많은 응답 성을 위해 1000 int 값을 낮추기 만하면됩니다.

        var resizing = false;
        window.onresize = function() {
            if(resizing) return;
            console.log("resize");
            resizing = true;
            setTimeout(function() {resizing = false;}, 1000);
        };

나는 Pim Jager의 우아한 솔루션을 좋아했지만, 마지막에는 추가 Paren이 있다고 생각하지만 설정 타임 아웃은 "Timeout = settimeout (func, 100);

다음은 dojo를 사용하는 내 버전입니다 (demo_resize ())라는 기능이 정의 된 것으로 가정합니다.

var _semaphorRS = null;
dojo.connect(window,"resize",function(){
 if (_semaphorRS != null) clearTimeout(_semaphorRS);
 _semaphorRS = setTimeout(demo_resize, 500);
 });

참고 : 내 버전에서는 후행 Paren이 필요합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top