相关疑难解决方法(0)

以下方法:

Init: function (selector, settings)
{
    setTimeout(function()
    {
        var s =
        {
            width: '100%',
            script_url: '/Content/Scripts/tiny_mce/tiny_mce.js',
            theme: "advanced",
            plugins: "autolink,lists,pagebreak,style,layer,table,paste,directionality,noneditable,visualchars,xhtmlxtras,template",
            theme_advanced_buttons1: "fontselect,fontsizeselect,|,bold,italic,underline,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            theme_advanced_buttons4: "",
            theme_advanced_more_colors: false,
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "none",
            theme_advanced_resizing: false,
            convert_urls: !!$(selector).data("richEditor-ConvertUrls") // by default we don't convert urls
        };
        $.extend(s, settings);
        $(selector).tinymce(s);
    },0);
}

适用于所有浏览器,出于某种原因,我需要setTimeout(f,0)调用firefox,这个方法是在MVC上的ajax部分加载上调用的,没有这个调用,编辑器挂起在firefox上并且页面中断(点击最常见的异常结果)而不是).随着电话,一切都很完美.

我想知道如何避免这个setTimeout调用(通过一些其他的解决方法),如果这不是一个选项,我想知道为什么.

我很害怕这可能不是这种情况下最干净的解决方案.

一旦用户点击标签,我就会使用javascript提交表单.有一种奇怪的行为,数据不会被发布.但如果我提交表格有延迟(即使延迟为0),它也可以.

这是html:

<form action="/other-page" method="post">
    <input id="val-1" type="checkbox" name="filter[]" value="1">
    <label for="val-1">Value 1</label>

    <input id="val-2" type="checkbox" name="filter[]" value="2">
    <label for="val-2">Value 2</label>
</form>

剧本:

<script>
    $('label').click(function() {
        var form = $(this).closest('form')

        // if I use the following line the values won't be set
        form.submit()

        // If I use a `setTimeout` it works, even with a delay of 0
        setTimeout(function() {
             form.submit()
        }, 0)
    })
</script>

这不是一个大问题,因为我可以使用它,setTimeout但写入延迟0是非常难看的.我考虑过浏览器错误,但我使用Chrome和Firefox进行了测试,结果相同.

关于发生了什么的任何想法？

所以我想出了这个例子,我无法理解为什么带有0秒的setTimeout是最后一个要执行的

function waitThreeSeconds() {
  setTimeout(function() {
    console.log("Finished Function");
  }, 0);
}

function clickHandler() {
  console.log("Clicked");
}

document.addEventListener('click', clickHandler);

waitThreeSeconds();

//waiting 5 seconds 
var ms = 5000 + new Date().getTime();
while (new Date() < ms) {}


console.log('Finished Execution');

如果将setTimeouts回调添加到队列中,为什么每次我执行click事件时,它都会先添加到队列中,然后再添加到setTimeout的回调中.直到全局执行上下文('main')从堆栈中弹出

我要通过一些遗留代码,我注意到以下几行:

// Stray timeout
var t = setTimeout('',1);

它有什么用吗？真的需要吗？

关于SO有一个以下问题:为什么setTimeout(fn,0)有时会有用？

解决方案是"暂停"JavaScript执行以让渲染线程赶上来.这就是setTimeout()的超时为0的效果.它就像C中的一个线程/进程产量.虽然它似乎说"立即运行"但实际上它让浏览器有机会完成一些非JavaScript的事情,这些事情一直等到完成这个新的JavaScript之前就已经完成了.

这解释了在setTimeout中执行函数的好处.但是如何执行空字符串呢？

我正在尝试阅读一些angularjs代码，有些时候调用$ timeout时没有延迟参数。

dataBinding: () => {
            this.$timeout(() => {
                this.selectedRow = null;
            });
        },

目的是什么？

这是场景...我向DOM添加了一个元素，该元素的初始类具有0的不透明度，然后添加了一个类以触发不透明度过渡到1-一个很好的简单淡入。代码如下所示：

.test {
  opacity: 0;
  transition: opacity .5s;
}

.test.show {
  opacity: 1;
}

const el = document.createElement('div')
el.textContent = 'Hello world!'
el.className = 'test' // <div class="test">Hello world!</div>
document.body.appendChild(el)

现在要触发淡入，我只需将show类添加到元素中：

setTimeout(() => {
  el.classList.add('show')
}, 10)

我使用的是setTimeout，因为如果不这样做，则将立即添加该类，并且不会发生淡入。它将最初在屏幕上可见，没有过渡。因此，我一直以来将10ms用于setTimeout，并且一直有效……直到现在。我遇到了需要将其设置为20ms的情况。有点脏 有人知道是否有安全的时间使用吗？我是否缺少有关DOM在这里的工作方式的信息？我知道我需要给浏览器一些时间来确定布局和绘画（因此setTimeout），但是要花多少时间呢？我感谢任何见识！

我有一个 div，其中包含网站导航中的选项卡表格。我将 div 设置为在移动设备中溢出，如下所示：

我想让 div 自动滚动到当前隐藏的活动选项卡，如下所示：

在另一个 SA 问题中，建议使用scrollIntoView. 在控制台测试了一下，效果很好：

document.getElementById("active_tab").scrollIntoView({block: "end"})

我什至使用了 jQuery 版本scrollintoview：

$('#active_tab').scrollintoview();

而且效果很好。问题是，当我将实际代码（任一代码）添加到我的网站时，溢出 div 会滚动一些随机量（似乎是一半）。这是一个例子：

在 Chrome 和 Safari 中尝试过此操作。我错过了一些明显的东西吗？我并不是想滚动整个页面 - 只是那个隐藏了溢出的 div 。非常奇怪的是，它直接在控制台中工作，但不能直接在我的代码中工作，并且对于 JS 和 JQ 都是如此。据我所知，没有其他 JS 等与此 div 等相关。

我有一个跟随功能,它将相对定位的元素1000px从它现在的位置滑下.

for (var i = 0; i < 1000; i++) {
    $('.my-element').css(
        'left',
        parseInt($('.my-element').css('left'), 10) + 1
    );
}

这不会产生滑动效果.相反,在执行结束时,元素突然向右移动1000px.

现在,如果我在setTimeout中包装UI更新,如下所示:

for (var i = 0; i < 1000; i++) {
    setTimeout(function () {
        $('.my-element').css(
            'left',
            parseInt($('.my-element').css('left'), 10) + 1
        );
    }, 0);
}

这会产生元素向右滑动1000px的视觉效果.

现在,根据我的不足和这个SO线程,为什么setTimeout(fn,0)有时会有用？,UI更新在浏览器事件队列中排队,就像同步回调像setTimeout回调一样排队.

因此,在第一种情况下,基本上,当执行for循环时,会产生1000个UI更新的队列.

在第二种情况下,首先,创建一个1000个setTimeout回调的队列,在执行时创建另一个1000 UI更新的队列.

因此,最终,两种情况都会创建1000个UI更新的相同队列.那为什么视觉效果不同呢？

我必须在这里查看一些重要的JavaScipt和浏览器呈现概念.任何能够启发我的人都会非常感激.

注意:上面的示例纯粹是为了理解目的,而不是尝试创建一个JS函数来滑动DOM元素.

我试图在按下按钮时切换包含加载动画的跨度，直到该功能使用 v-if 完成。但是当我按下按钮时，DOM 会冻结并且 span 元素不会改变，直到函数调用结束。如何使 DOM 不冻结并显示加载图标？非阻塞按钮按下可能是一个解决方案？

HTML

    <form class="form-inline">
    <div class="form-group">

        <div style="display: inline-flex" class='input-group date' id='datetimepicker1'>
            <input placeholder="Start Date" id="pick1" type='text' class="form-control"/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <div style="display: inline-flex" class='input-group date' id='datetimepicker2'>
            <input placeholder="End Date" id="pick2" type='text' class="form-control"/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <input  class="form-control" type="text" v-model="Keyword" placeholder="keyword">

    </div>

        @*Start Date<input type="text" v-model="StartDate" placeholder="Start Date" style="width: 177px" />
        End Date <input type="text" v-model="EndDate" placeholder="End Date" style="width: …

我正在尝试在Javascript中验证数字输入字段.

问题是,当我使用鼠标滚轮更改值时,我无法正确验证它.

如果当前值为5,并且我使用鼠标滚轮向上滚动,则当前值显示为5,而不显示为6.似乎在事件开始时触发了鼠标事件.因此它仍然具有旧的价值.

<label>Choose an ice cream flavor:
    <input type="number">
    <p></p>
</label>
<script>
var inputc = document.querySelector('input');
var pc = document.querySelector('p');
inputc.addEventListener('wheel', function (e){
  pc.innerText = 'The value is ' + inputc.value;
});
</script>

链接到jsfiddle:https://jsfiddle.net/3o8g7cdy/1/

关于如何验证此相关性的任何想法.谢谢.